@import url('../fonts/cairo.css');

:root {
    /* ── Canonical PowerLink design tokens (VISUAL_IDENTITY_GUIDE §4) ───────────
       Injected to end the Portal's palette drift and restore cross-app harmony. */
    --pl-primary: #2E7D32;
    --pl-primary-dark: #1B5E20;
    --pl-primary-soft: #E8F5E9;
    --pl-danger: #D32F2F;
    --pl-text: #263238;
    --pl-text-muted: #78909C;
    --pl-border: #E0E0E0;
    --pl-warning: #F57C00;
    --pl-warning-soft: #FFF3E0;

    /* ── Local aliases, now bound to the canonical tokens so every consuming rule
       (.btn-primary, .toast-error, .text-danger, .reading-cost, …) inherits the
       corporate palette. Drifted Google Material values removed:
       danger #ea4335 → #D32F2F · success #34a853 → brand green · muted #5f6368 → #78909C. */
    --primary: var(--pl-primary);
    --primary-dark: var(--pl-primary-dark);
    --secondary: var(--pl-primary-soft);
    --dark: var(--pl-text);
    --text-muted: var(--pl-text-muted);
    --bg: #f2f5f9;
    --white: #ffffff;
    --danger: var(--pl-danger);
    --success: var(--pl-primary);
    --warning: #fbbc04;
    --border: var(--pl-border);
    --shadow: 0 8px 24px rgba(0,0,0,0.04);
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Cairo', sans-serif; 
}

body { 
    background-color: var(--bg); 
    color: var(--dark); 
    -webkit-tap-highlight-color: transparent; 
}

body.modal-open {
    overflow: hidden;
}

.container { 
    max-width: 480px; 
    margin: 0 auto; 
    padding: 20px; 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
}

.hidden { display: none !important; }
.text-primary { color: var(--primary); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.opacity-50 { opacity: 0.5; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.align-items-center { align-items: center; }
.flex-column { flex-direction: column; }
.w-100 { width: 100%; }
.flex-grow-1 { flex-grow: 1; }
.text-start { text-align: right; }
.gap-2 { gap: 10px; }
.gap-3 { gap: 15px; }
.mt-1 { margin-top: 5px; }
.mt-3 { margin-top: 15px; }
.mt-4 { margin-top: 20px; }
.mb-4 { margin-bottom: 20px; }
.fw-bold { font-weight: bold; }

/* Animations */
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.fade-up { animation: fadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fadeUp { 
    from { transform: translateY(100%); } 
    to { transform: translateY(0); } 
}

/* Authentication Card */
#login-section { justify-content: center; }
.auth-card { 
    background: var(--white); 
    padding: 35px 25px; 
    border-radius: 24px; 
    box-shadow: var(--shadow); 
    text-align: center; 
}
.logo-container {
    width: 132px;
    height: 132px;
    background: var(--white);
    border-radius: 28px;          /* rounded-square frame self-scales to any logo aspect */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(46, 125, 50, 0.12);
}
#company-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;          /* never crop a tenant logo, but fill the frame for visibility */
    padding: 8px;                 /* tight inset → maximizes the visible corporate mark */
}
#default-logo-icon {
    font-size: 48px !important;
    color: var(--primary);
}
.brand {
    /* Unified high-contrast single-color corporate lockup (no green/black split) */
    color: var(--pl-text);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
    margin-bottom: 5px;
    /* 320px long-tenant-name containment */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Branding skeleton: a neutral shimmer shown while the provider name loads (first visit, no
   cache) — replaces the misleading default "بوابة المشتركين" flash. */
.brand-skeleton {
    display: inline-block;
    min-width: 150px;
    height: 1.4em;
    vertical-align: middle;
    border-radius: 8px;
    color: transparent !important;
    background: linear-gradient(90deg, #ececec 25%, #f7f7f7 37%, #ececec 63%);
    background-size: 400% 100%;
    animation: pl-shimmer 1.3s ease-in-out infinite;
}
@keyframes pl-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
.auth-card h2 {
    font-size: 1.2rem; 
    margin-top: 15px; 
    margin-bottom: 5px; 
}
.subtitle { 
    color: var(--text-muted); 
    font-size: 0.9rem; 
    margin-bottom: 25px; 
}

/* Form Elements */
input[type="number"], .large-pin-input {
    width: 100%; 
    padding: 20px; 
    margin-bottom: 25px; 
    border: 2px solid var(--border); 
    border-radius: 16px;
    font-size: 2rem; 
    letter-spacing: 20px; 
    text-align: center; 
    font-weight: bold; 
    color: var(--primary);
    transition: 0.3s; 
    background: #fafafa; 
    outline: none;
}
input[type="number"]:focus, .large-pin-input:focus { 
    border-color: var(--primary); 
    background: var(--white); 
    box-shadow: 0 0 0 4px var(--secondary); 
}

.btn-primary {
    width: 100%;
    padding: 16px;
    background: var(--pl-primary);
    color: var(--white);
    border: none;
    border-radius: 16px;
    font-size: 1.1rem; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.2s;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 10px; 
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.7; cursor: not-allowed; }

.error-msg { 
    color: var(--danger); 
    font-size: 0.9rem; 
    margin-top: 15px; 
    font-weight: 600; 
    min-height: 20px; 
}

/* Dashboard UI */
.dashboard-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 25px; 
}
.user-profile { display: flex; align-items: center; gap: 12px; }
.avatar {
    width: 50px;
    height: 50px;
    background: #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: var(--white); }
#user-name { 
    font-size: 1.1rem; 
    margin: 0; 
    font-weight: 700; 
    color: var(--dark); 
}
.status-badge { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.btn-icon { 
    background: none; 
    border: none; 
    font-size: 1.3rem; 
    padding: 8px; 
    cursor: pointer; 
    border-radius: 50%; 
    transition: 0.2s; 
}
.btn-icon:active { background: #f0f0f0; }

.gradient-card {
    background: linear-gradient(135deg, var(--pl-primary), var(--pl-primary-dark));
    color: white; 
    padding: 25px; 
    border-radius: 24px; 
    box-shadow: 0 10px 20px rgba(46, 125, 50, 0.4);
    margin-bottom: 20px; 
    position: relative; 
    overflow: hidden;
}
.card-top { 
    display: flex; 
    justify-content: space-between; 
    font-size: 0.9rem; 
    margin-bottom: 10px; 
    opacity: 0.9; 
}
.gradient-card h1 { font-size: 2.5rem; margin: 0; font-weight: 700; }
.card-bottom { margin-top: 15px; font-size: 0.8rem; opacity: 0.8; }

/* Action Cards */
.action-card-btn {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: right;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.action-card-btn:hover {
    background: #fff;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(46, 125, 50, 0.12);
}
.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.bg-yellow { background: #fef0cd; color: var(--warning); }
.bg-green { background: var(--secondary); color: var(--primary); }

/* History List */
.section-title { font-size: 1.1rem; margin-bottom: 15px; color: var(--dark); }
.history-list { display: flex; flex-direction: column; gap: 10px; }
.history-item {
    background: var(--white);
    padding: 15px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-right: 4px solid var(--pl-primary);
}
.reading-date { font-size: 0.85rem; color: var(--text-muted); display: block; }
.reading-val { font-size: 1.1rem; font-weight: bold; color: var(--dark); }
.reading-cost { font-size: 1.2rem; font-weight: bold; color: var(--danger); text-align: left;}
.reading-image img {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--border);
}

/* Notifications (Feature #2) — bell, badge, inbox list */
.header-actions { display: flex; align-items: center; gap: 4px; }
.notif-bell { position: relative; color: var(--pl-primary); }
.notif-badge {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--pl-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--white);
}
.notif-item {
    background: var(--white);
    padding: 14px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-right: 4px solid var(--pl-border);
}
.notif-item.unread { border-right-color: var(--pl-primary); background: var(--pl-primary-soft); }
.notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: var(--pl-primary-soft);
    color: var(--pl-primary);
}
.notif-item.notif-negative .notif-icon { background: #fdecea; color: var(--pl-danger); }
.notif-item.notif-warning .notif-icon { background: var(--pl-warning-soft); color: var(--pl-warning); }
.notif-body { flex-grow: 1; min-width: 0; }
.notif-title { font-size: 0.95rem; font-weight: 700; color: var(--dark); display: block; }
.notif-text { font-size: 0.82rem; color: var(--pl-text); margin-top: 3px; line-height: 1.5; }
.notif-date { font-size: 0.7rem; color: var(--text-muted); margin-top: 6px; display: block; }
.notif-empty { text-align: center; color: var(--text-muted); padding: 25px 10px; font-size: 0.9rem; }

/* Portal resume anti-flash splash (3a) — shown via html.pl-resuming until the silent resume resolves */
#resume-splash { display: none; }
html.pl-resuming #login-section,
html.pl-resuming #welcome-section { display: none !important; }
html.pl-resuming #resume-splash {
    display: flex;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--white);
    z-index: 9999;
}
#resume-splash .pl-spin {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid var(--pl-primary-soft);
    border-top-color: var(--pl-primary);
    animation: pl-spin 0.8s linear infinite;
}
#resume-splash .resume-text { color: var(--pl-text-muted); font-size: 0.9rem; font-weight: 600; }
@keyframes pl-spin { to { transform: rotate(360deg); } }

/* Reading-image lightbox — in-page viewer (parity with admin); centered over a dimmed overlay */
#imageLightbox { align-items: center; }
#imageLightbox .lightbox-content {
    position: relative;
    z-index: 1;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#imageLightbox #lightboxImg {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    background: var(--white);
}
.lightbox-close {
    position: absolute;
    top: -46px;
    inset-inline-end: 0;
    color: #fff;
    font-size: 1.6rem;
}

/* Modals */
.custom-modal { 
    position: fixed; 
    inset: 0; 
    z-index: 1000; 
    display: flex; 
    align-items: flex-end; 
    justify-content: center; 
}
.modal-overlay { 
    position: absolute; 
    inset: 0; 
    background: rgba(0,0,0,0.6); 
    backdrop-filter: blur(2px);
}
.modal-card { 
    position: relative; 
    width: 100%; 
    max-width: 480px; 
    background: var(--white); 
    border-radius: 24px 24px 0 0; 
    padding: 25px; 
    box-shadow: 0 -10px 25px rgba(0,0,0,0.1);
    max-height: 90vh; 
    overflow-y: auto; 
    padding-bottom: 40px;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-title { display: flex; align-items: center; gap: 10px; }
.modal-title h3 { margin: 0; font-size: 1.2rem; }

textarea { 
    width: 100%; 
    padding: 15px; 
    border: 2px solid var(--border); 
    border-radius: 16px; 
    font-size: 1rem; 
    resize: none; 
    margin-top: 10px; 
    background: #fafafa; 
    outline:none; 
    transition: 0.3s;
}
textarea:focus { border-color: var(--warning); background: var(--white); }

/* File Upload UI */
.form-control-simple {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary);
    outline: none;
}
.form-control-simple:focus { border-color: var(--primary); }

.file-upload-wrapper {
    width: 100%;
    min-height: 150px;
    border: 2px dashed var(--border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    background: #fafafa;
    overflow: hidden;
    position: relative;
}
#image-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Number input arrows removal */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* Toasts */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 90%;
    max-width: 400px;
    transition: 0.3s ease-in-out;
}
.toast-content {
    background: var(--dark);
    color: white;
    padding: 15px 20px;
    border-radius: 12px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    font-size: 0.95rem;
}
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-warning { background: var(--warning); color: #000; }

.footer { 
    text-align: center; 
    margin-top: 40px; 
    padding-bottom: 20px; 
    font-size: 0.85rem; 
    color: var(--text-muted); 
}

.form-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-right: 5px;
}

#login-phone {
    font-size: 1.5rem !important;
    letter-spacing: 2px !important;
    text-align: center;
}

.large-pin-input {
    font-size: 1.5rem !important;
    letter-spacing: 10px !important;
}

/* Optional luxury tariff badge — sits under the debt gradient-card.
   Current active rate only: standard (green) vs subscriber custom rate (amber). */
.tariff-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    margin: -8px 2px 20px;
    padding: 8px 15px;
    border-radius: 50rem;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--pl-primary-soft);
    color: var(--pl-primary-dark);
    box-shadow: var(--shadow);
}
.tariff-badge::before {
    content: "\f0e7"; /* fa-bolt */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9em;
}
.tariff-badge.tariff-custom {
    background: var(--pl-warning-soft);
    color: var(--pl-warning);
}
/* ── Web Push opt-in banner + opt-out (portal notifications) ───────────────── */
.push-optin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--pl-primary-soft);
    border: 1px solid var(--pl-primary);
    border-radius: 14px;
    padding: 12px 14px;
    margin: 0 0 16px;
}
.push-optin-body {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pl-primary-dark);
    font-size: 0.9rem;
    line-height: 1.5;
}
.push-optin-icon { color: var(--pl-primary); font-size: 1.1rem; flex-shrink: 0; }
.push-optin-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.push-optin-btn {
    background: var(--pl-primary);
    color: #fff;
    border: none;
    border-radius: 50rem;
    padding: 7px 20px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}
.push-optin-btn:active { background: var(--pl-primary-dark); }
.push-optin-dismiss {
    background: transparent;
    border: none;
    color: var(--pl-text-muted);
    cursor: pointer;
    padding: 6px;
    font-size: 0.95rem;
}
.notif-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--pl-border);
    text-align: center;
}
.notif-optout {
    background: transparent;
    border: none;
    color: var(--pl-text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 8px;
}
.notif-optout:active { color: var(--pl-danger); }