/* Client portal styles */

:root {
    --blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;
    --blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;
    --navy:#0a1f44;--white:#fff;
    --gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;
    --gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;
    --gray-800:#1e293b;--gray-900:#0f172a;
    --red-50:#fef2f2;--red-500:#ef4444;--red-600:#dc2626;
    --green-50:#ecfdf5;--green-500:#10b981;--green-600:#059669;
    --amber-50:#fef3c7;--amber-500:#f59e0b;--amber-600:#d97706;
    --radius:12px;
    --shadow:0 4px 16px -4px rgba(15,23,42,0.08);
    --shadow-lg:0 20px 50px -20px rgba(30,58,138,0.3);
}

*{box-sizing:border-box}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;line-height:1.55;color:var(--gray-800);background:var(--gray-50);-webkit-font-smoothing:antialiased}
a{color:var(--blue-700);text-decoration:none}
a:hover{color:var(--blue-900)}
h1,h2,h3{color:var(--navy);margin:0 0 14px;font-weight:600}
h1{font-size:1.6rem}h2{font-size:1.15rem}h3{font-size:1rem}
p{margin:0 0 10px}
.muted{color:var(--gray-500)}
hr{border:0;border-top:1px solid var(--gray-200);margin:20px 0}

/* ===== Login / Register card ===== */
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,var(--blue-50) 0%,var(--white) 50%,var(--blue-100) 100%)}
.auth-card{width:100%;max-width:460px;background:var(--white);border-radius:18px;padding:36px;box-shadow:var(--shadow-lg);border:1px solid var(--gray-200)}
.auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--gray-100)}
.auth-card h1{font-size:1.5rem;margin-bottom:6px}
.auth-card .muted{margin-bottom:24px}
.auth-tabs{display:flex;gap:4px;background:var(--gray-100);padding:4px;border-radius:10px;margin-bottom:22px}
.auth-tabs a{flex:1;text-align:center;padding:10px;border-radius:7px;color:var(--gray-600);font-weight:600;font-size:0.9rem}
.auth-tabs a.active{background:var(--white);color:var(--blue-700);box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.auth-card .field{margin-bottom:16px}
.auth-card .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-card button{width:100%;margin-top:8px}
.auth-foot{text-align:center;margin-top:24px;font-size:0.85rem;color:var(--gray-500)}
.auth-credit{text-align:center;margin-top:8px;font-size:0.75rem;color:var(--gray-400)}
.auth-credit a{color:var(--blue-700);font-weight:600;text-decoration:none}
.auth-credit a:hover{color:var(--blue-900);text-decoration:underline}
.p-foot-credit{padding:18px 36px;border-top:1px solid var(--gray-200);background:var(--white);text-align:center;margin-top:30px}
.p-foot-credit p{margin:0;font-size:0.78rem;color:var(--gray-500)}
.p-foot-credit a{color:var(--blue-700);font-weight:600;text-decoration:none}
.p-foot-credit a:hover{color:var(--blue-900);text-decoration:underline}

/* ===== Logo mark (shared) ===== */
.logo-mark{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:700;font-size:0.95rem;flex-shrink:0}
.logo-mark .amp{font-size:0.7rem;opacity:0.7;margin:0 1px}

/* ===== Shell ===== */
.p-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.p-sidebar{background:var(--navy);color:rgba(255,255,255,0.85);padding:24px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.p-brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:18px}
.p-brand-name{color:var(--white);font-weight:600;font-size:0.95rem}
.p-brand-sub{color:rgba(255,255,255,0.55);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.12em}

.p-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.p-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;color:rgba(255,255,255,0.75);border-radius:8px;font-size:0.9rem;font-weight:500;transition:all 0.2s}
.p-nav a:hover{background:rgba(255,255,255,0.06);color:var(--white)}
.p-nav a.active{background:var(--blue-700);color:var(--white)}
.p-badge{margin-left:auto;background:var(--red-500);color:var(--white);padding:1px 8px;border-radius:999px;font-size:0.7rem;font-weight:600}
.p-badge-warn{background:var(--amber-500)}

.p-foot{padding-top:18px;border-top:1px solid rgba(255,255,255,0.08)}
.p-user-dropdown{position:relative}
.p-user{display:flex;width:100%;align-items:center;gap:10px;padding:10px;margin:0;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:10px;cursor:pointer;text-align:left;color:inherit;font-family:inherit;transition:background 0.2s ease}
.p-user:hover,.p-user[aria-expanded="true"]{background:rgba(255,255,255,0.1)}
.p-user-role{color:rgba(255,255,255,0.5);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin-top:1px}
.p-user-caret{color:rgba(255,255,255,0.5);transition:transform 0.2s ease;flex-shrink:0}
.p-user[aria-expanded="true"] .p-user-caret{transform:rotate(180deg)}
.p-user-menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:6px;box-shadow:0 -8px 30px -8px rgba(0,0,0,0.45);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 0.2s,transform 0.2s,visibility 0.2s;z-index:100}
.p-user[aria-expanded="true"] + .p-user-menu{opacity:1;visibility:visible;transform:translateY(0)}
.p-user-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;color:var(--gray-700);border-radius:7px;font-size:0.85rem;font-weight:500;text-decoration:none;transition:background 0.15s ease}
.p-user-menu a:hover{background:var(--blue-50);color:var(--navy)}
.p-user-menu a svg{color:var(--gray-400);flex-shrink:0}
.p-user-menu a:hover svg{color:var(--blue-700)}
.p-user-menu hr{border:0;border-top:1px solid var(--gray-100);margin:4px 0}
.p-user-menu a.signout{color:var(--red-600)}
.p-user-menu a.signout svg{color:var(--red-500)}
.p-user-menu a.signout:hover{background:var(--red-50);color:var(--red-600)}
.p-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:0.85rem}
.p-user-name{color:var(--white);font-size:0.85rem;font-weight:500;line-height:1.2}
.p-logout{color:rgba(255,255,255,0.55);font-size:0.78rem}
.p-logout:hover{color:var(--white)}
.p-back{display:block;text-align:center;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.85);padding:8px;border-radius:6px;font-size:0.82rem}
.p-back:hover{background:rgba(255,255,255,0.12);color:var(--white)}

/* ===== Main ===== */
.p-main{background:var(--gray-50)}
.p-topbar{background:var(--white);border-bottom:1px solid var(--gray-200);padding:22px 36px;display:flex;align-items:center;justify-content:space-between}
.p-topbar h1{margin:0}
.p-content{padding:30px 36px 60px;max-width:1200px}

/* ===== Alerts ===== */
.alert{padding:14px 18px;border-radius:10px;margin-bottom:22px;border:1px solid;font-size:0.92rem}
.alert-success{background:var(--green-50);border-color:#a7f3d0;color:#047857}
.alert-error{background:var(--red-50);border-color:#fecaca;color:var(--red-600)}
.alert-warn{background:var(--amber-50);border-color:#fcd34d;color:var(--amber-600)}
.alert-info{background:var(--blue-50);border-color:var(--blue-200);color:var(--blue-800)}

/* ===== Card ===== */
.card{background:var(--white);border-radius:var(--radius);border:1px solid var(--gray-200);padding:26px;margin-bottom:22px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:14px;flex-wrap:wrap}
.card-head h2{margin:0}

/* ===== Buttons ===== */
.btn,.btn-primary,.btn-ghost,.btn-text,.btn-danger{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:8px;border:1.5px solid transparent;font-family:inherit;font-size:0.9rem;font-weight:600;cursor:pointer;transition:all 0.2s;text-decoration:none}
.btn-primary{background:var(--blue-700);color:var(--white)}
.btn-primary:hover{background:var(--blue-800);color:var(--white);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--gray-700);border-color:var(--gray-200)}
.btn-ghost:hover{background:var(--gray-50);border-color:var(--gray-300)}
.btn-text{background:transparent;color:var(--blue-700);padding:4px 8px;font-weight:500}
.btn-text:hover{color:var(--blue-900);background:var(--blue-50)}
.btn-danger{background:transparent;color:var(--red-600);border-color:transparent}
.btn-danger:hover{background:var(--red-50)}
.btn-success{background:var(--green-600);color:var(--white)}
.btn-success:hover{background:#047857;color:var(--white)}
.btn-block{width:100%;justify-content:center}

/* ===== Forms ===== */
.field{margin-bottom:14px;display:flex;flex-direction:column}
.field label{font-size:0.82rem;font-weight:600;color:var(--gray-700);margin-bottom:6px}
.field input[type="text"],.field input[type="email"],.field input[type="password"],.field input[type="tel"],.field input[type="number"],.field input[type="date"],.field input[type="datetime-local"],.field select,.field textarea{width:100%;padding:10px 12px;border:1.5px solid var(--gray-200);border-radius:8px;font-size:0.92rem;font-family:inherit;color:var(--gray-800);background:var(--white);transition:border-color 0.2s,box-shadow 0.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(59,130,246,0.12)}
.field textarea{resize:vertical;min-height:90px;font-family:inherit}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .field{margin-bottom:0}
.field.field-wide{grid-column:1 / -1}
.form-actions{display:flex;gap:10px;margin-top:22px;padding-top:22px;border-top:1px solid var(--gray-100);align-items:center}

/* ===== Stats / dashboard ===== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat-card{display:block;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:22px;color:var(--gray-800);transition:all 0.2s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--blue-100)}
.stat-num{font-size:2rem;font-weight:700;color:var(--navy);line-height:1;margin-bottom:6px}
.stat-card.warn .stat-num{color:var(--amber-600)}
.stat-card.danger .stat-num{color:var(--red-600)}
.stat-card.success .stat-num{color:var(--green-600)}
.stat-label{color:var(--gray-500);font-size:0.85rem}

/* ===== Table ===== */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--gray-100);vertical-align:middle}
.table th{background:var(--gray-50);color:var(--gray-600);font-size:0.78rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.table tr:last-child td{border-bottom:0}
.table tr.unread td{background:var(--blue-50);font-weight:500}
.truncate{max-width:320px;color:var(--gray-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-actions{white-space:nowrap;text-align:right}
.row-actions a,.row-actions button{margin-left:4px}

.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:0.75rem;font-weight:600}
.pill-paid{background:var(--green-50);color:#047857}
.pill-sent{background:var(--blue-50);color:var(--blue-700)}
.pill-overdue{background:var(--red-50);color:var(--red-600)}
.pill-draft{background:var(--gray-100);color:var(--gray-500)}
.pill-void{background:var(--gray-100);color:var(--gray-400)}
.pill-requested{background:var(--amber-50);color:var(--amber-600)}
.pill-confirmed{background:var(--green-50);color:#047857}
.pill-cancelled{background:var(--red-50);color:var(--red-600)}
.pill-completed{background:var(--gray-100);color:var(--gray-600)}

/* ===== Documents / File manager ===== */
.fm-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.fm-toolbar .spacer{flex:1}
.fm-breadcrumb{display:flex;align-items:center;gap:6px;font-size:0.92rem;color:var(--gray-600);margin-bottom:14px}
.fm-breadcrumb a{color:var(--blue-700)}
.fm-breadcrumb .sep{color:var(--gray-300)}

.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.fm-item{background:var(--white);border:1px solid var(--gray-200);border-radius:10px;padding:18px 14px;text-align:center;transition:all 0.2s;position:relative;color:var(--gray-800)}
.fm-item:hover{border-color:var(--blue-300);transform:translateY(-2px);box-shadow:var(--shadow)}
.fm-icon{font-size:2.2rem;margin-bottom:6px;line-height:1}
.fm-name{font-weight:500;font-size:0.85rem;color:var(--gray-800);word-break:break-word;line-height:1.3;margin-bottom:4px}
.fm-meta{font-size:0.72rem;color:var(--gray-500)}
.fm-actions{position:absolute;top:6px;right:6px;display:none}
.fm-item:hover .fm-actions{display:flex;gap:2px}
.fm-actions button,.fm-actions a{background:var(--white);border:1px solid var(--gray-200);border-radius:6px;padding:3px 6px;font-size:0.7rem;color:var(--gray-600);cursor:pointer}
.fm-actions button:hover,.fm-actions a:hover{background:var(--blue-50);color:var(--blue-700)}

.upload-zone{border:2px dashed var(--blue-200);border-radius:14px;padding:30px;text-align:center;background:var(--blue-50);transition:all 0.2s;cursor:pointer;margin-bottom:18px}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--blue-500);background:var(--blue-100)}
.upload-zone h3{margin:6px 0 4px;color:var(--blue-800)}
.upload-zone p{margin:0;color:var(--gray-600);font-size:0.88rem}
.upload-zone input[type="file"]{display:none}

/* ===== Messages ===== */
.msg-thread{max-height:60vh;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:75%;padding:14px 16px;border-radius:14px;font-size:0.93rem;line-height:1.55}
.msg-them{align-self:flex-start;background:var(--gray-100);color:var(--gray-800);border-bottom-left-radius:4px}
.msg-me{align-self:flex-end;background:var(--blue-700);color:var(--white);border-bottom-right-radius:4px}
.msg-me a{color:#dbeafe;text-decoration:underline}
.msg-meta{font-size:0.72rem;margin-top:6px;opacity:0.75}
.msg-them .msg-meta{color:var(--gray-500)}

.compose{margin-top:22px;padding-top:22px;border-top:1px solid var(--gray-100)}
.compose textarea{width:100%;min-height:80px;padding:12px;border:1.5px solid var(--gray-200);border-radius:10px;font-family:inherit;font-size:0.92rem;resize:vertical}
.compose textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(59,130,246,0.12)}

/* ===== Appointments ===== */
.appt-list{display:flex;flex-direction:column;gap:12px}
.appt-card{display:flex;align-items:center;gap:18px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:18px}
.appt-date{flex-shrink:0;text-align:center;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:10px;padding:12px 14px;min-width:80px}
.appt-date .month{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--blue-700)}
.appt-date .day{font-size:1.8rem;font-weight:700;color:var(--navy);line-height:1;margin:2px 0}
.appt-date .time{font-size:0.78rem;color:var(--gray-600)}
.appt-info{flex:1}
.appt-info h3{margin:0 0 4px;font-size:1rem}
.appt-info .meta{font-size:0.83rem;color:var(--gray-500)}

/* ===== PWA install prompt ===== */
.pwa-install{position:fixed;bottom:20px;left:20px;right:20px;z-index:950;pointer-events:none}
.pwa-install-inner{pointer-events:auto;max-width:520px;margin:0 auto;background:var(--white);border:1px solid var(--gray-200);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 16px 50px -16px rgba(15,23,42,0.35),0 4px 14px -4px rgba(15,23,42,0.12);animation:pwaIn .35s cubic-bezier(.4,0,.2,1)}
@keyframes pwaIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.pwa-install-inner img{border-radius:8px;flex-shrink:0}
.pwa-install-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.pwa-install-text strong{color:var(--navy);font-size:0.92rem;font-weight:600}
.pwa-install-text small{color:var(--gray-500);font-size:0.78rem;margin-top:2px}
.pwa-install .btn-primary{padding:8px 18px;font-size:0.85rem;border-radius:999px;flex-shrink:0}
.pwa-install-close{background:transparent;border:0;cursor:pointer;font-size:1.4rem;line-height:1;color:var(--gray-400);padding:4px 8px;border-radius:6px;flex-shrink:0}
.pwa-install-close:hover{background:var(--gray-100);color:var(--gray-700)}
@media (max-width:480px){.pwa-install{bottom:12px;left:12px;right:12px}}

/* ===== Activity log (security page) ===== */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
    display: flex;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--gray-100);
}
.activity-item:last-child { border-bottom: 0; }
.activity-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.activity-body { flex: 1; min-width: 0; }
.activity-body strong { color: var(--navy); font-size: 0.92rem; }
.activity-meta {
    font-size: 0.78rem;
    color: var(--gray-500);
    margin-top: 4px;
}

/* ===== Slot picker (appointment booking) ===== */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}
.slot-btn {
    padding: 10px 14px;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    transition: all .2s ease;
}
.slot-btn:hover {
    border-color: var(--blue-500);
    background: var(--blue-50);
    color: var(--blue-700);
    transform: translateY(-1px);
}
.slot-btn.selected {
    background: var(--blue-700);
    border-color: var(--blue-700);
    color: var(--white);
    box-shadow: 0 8px 20px -8px rgba(29, 78, 216, 0.5);
}

/* ===== Invoice / Billing ===== */
.invoice-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:22px;margin-bottom:14px;display:flex;align-items:center;gap:18px}
.invoice-num{font-family:'SF Mono','Monaco',monospace;font-size:0.78rem;color:var(--gray-500);font-weight:500}
.invoice-info{flex:1}
.invoice-info h3{margin:0 0 4px;font-size:1rem}
.invoice-info .meta{font-size:0.83rem;color:var(--gray-500)}
.invoice-amount{font-size:1.4rem;font-weight:700;color:var(--navy)}

.invoice-detail .lineitems{margin:18px 0;border:1px solid var(--gray-200);border-radius:10px;overflow:hidden}
.invoice-detail .lineitems th{background:var(--gray-50)}
.invoice-detail .totals{display:flex;justify-content:flex-end;margin-top:18px}
.invoice-detail .totals table{min-width:280px}
.invoice-detail .totals td{padding:8px 0}
.invoice-detail .totals tr.grand td{font-size:1.2rem;font-weight:700;color:var(--navy);border-top:2px solid var(--gray-200)}

.pay-box{background:linear-gradient(135deg,var(--blue-700),var(--blue-900));color:var(--white);border-radius:var(--radius);padding:24px;margin-top:22px}
.pay-box h3{color:var(--white);margin-bottom:6px}
.pay-box p{color:rgba(255,255,255,0.85);margin-bottom:14px}
.pay-box .field label{color:rgba(255,255,255,0.8)}
.pay-box .field input,.pay-box .field select{background:rgba(255,255,255,0.95)}
.pay-box .btn-primary{background:var(--white);color:var(--blue-800)}
.pay-box .btn-primary:hover{background:var(--blue-50)}

/* ===== Responsive ===== */
@media (max-width:900px){
    .p-shell{grid-template-columns:1fr}
    .p-sidebar{position:relative;height:auto;flex-direction:row;flex-wrap:wrap;gap:12px;padding:16px}
    .p-brand{padding:0;border:0;margin:0}
    .p-nav{flex:1 1 100%;flex-direction:row;overflow-x:auto;gap:6px}
    .p-nav a{white-space:nowrap}
    .p-foot{flex:1 1 100%;padding-top:0;border-top:0;display:flex;gap:12px;align-items:center}
    .p-foot .p-user{flex:1;margin:0}
    .p-foot .p-back{flex:0 0 auto;padding:8px 14px}
    .p-content{padding:22px 18px 40px}
    .p-topbar{padding:18px 22px}
    .form-grid{grid-template-columns:1fr}
    .stat-grid{grid-template-columns:repeat(2,1fr)}
    .invoice-card{flex-wrap:wrap}
    .auth-card{padding:24px}
}