:root { --navy:#102a43; --navy-deep:#0b1f33; --blue:#276ef1; --blue-soft:#eaf1ff; --ink:#1c2b3a; --muted:#6b7a90; --line:#e5eaf1; --surface:#f5f7fb; --success:#14804a; --danger:#d14343; }
* { box-sizing:border-box; }
body { margin:0; background:var(--surface); color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:.925rem; }
.app-shell { min-height:100vh; }
.app-sidebar { width:265px!important; min-height:100vh; position:fixed; inset:0 auto 0 0; z-index:1045; padding:1.35rem .85rem; display:flex; flex-direction:column; background:linear-gradient(180deg,var(--navy-deep),var(--navy)); color:#c8d5e5; border:0; }
.sidebar-brand { display:flex; align-items:center; justify-content:space-between; padding:0 .55rem 1.55rem; }
.brand-link { color:#fff; text-decoration:none; display:flex; align-items:center; gap:.7rem; font-size:1.15rem; font-weight:800; letter-spacing:-.03em; }.brand-link span span { color:#79a9ff; }
.brand-mark { display:grid; place-items:center; height:35px; width:35px; border-radius:10px; background:var(--blue); box-shadow:0 5px 16px rgba(39,110,241,.35); }
.sidebar-label { font-size:.64rem; letter-spacing:.12em; font-weight:700; color:#7890aa; padding:.45rem .7rem; }.sidebar-nav { display:grid; gap:.2rem; }
.sidebar-link { display:flex; align-items:center; gap:.75rem; color:#bdcad9; text-decoration:none; border-radius:9px; padding:.7rem .75rem; font-weight:550; transition:.18s ease; }.sidebar-link i { width:19px; font-size:1rem; }.sidebar-link:hover { background:rgba(255,255,255,.08); color:#fff; }.sidebar-link.active { background:var(--blue); color:white; box-shadow:0 5px 14px rgba(0,0,0,.16); }
.sidebar-count { margin-left:auto; min-width:1.35rem; padding:.13rem .35rem; border-radius:99px; color:inherit; background:rgba(255,255,255,.16); font-size:.68rem; text-align:center; }.sidebar-link.active .sidebar-count { background:rgba(255,255,255,.24); }.sidebar-user { margin-top:auto; border-top:1px solid rgba(255,255,255,.12); padding:.9rem .45rem 0; display:flex; align-items:center; gap:.65rem; }.sidebar-user-text { min-width:0; flex:1; }.sidebar-user-text strong,.sidebar-user-text small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.sidebar-user-text strong { color:#fff; font-size:.8rem; }.sidebar-user-text small { color:#91a6bc; font-size:.7rem; }.sidebar-user a { color:#9eb2c7; }.sidebar-user a:hover { color:#fff; }
.avatar-initials { display:grid; place-items:center; height:36px; width:36px; flex:0 0 36px; border-radius:50%; background:linear-gradient(135deg,#75a7ff,#276ef1); color:#fff; font-size:.8rem; font-weight:800; }.avatar-small { height:32px; width:32px; flex-basis:32px; }
.app-main { margin-left:265px; min-height:100vh; }.app-topbar { min-height:86px; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 2.1rem; background:#fff; border-bottom:1px solid var(--line); }.app-topbar h1 { margin:0; font-size:1.35rem; font-weight:750; letter-spacing:-.03em; }.topbar-kicker { margin:0 0 .2rem; color:var(--blue); font-size:.63rem; letter-spacing:.12em; font-weight:800; }.topbar-actions { display:flex; align-items:center; gap:.8rem; }.topbar-date { color:var(--muted); font-size:.8rem; }.sidebar-toggle { color:var(--navy); font-size:1.35rem; padding:0; margin-right:1rem; }.app-content { padding:1.8rem 2.1rem 2.5rem; max-width:1600px; }
.app-content > .row:first-child h4 { display:none; }.card { border:1px solid var(--line); border-radius:13px; box-shadow:0 2px 5px rgba(16,42,67,.025); overflow:hidden; background:#fff; }.card-header { min-height:58px; display:flex; align-items:center; padding:1rem 1.2rem; background:#fff; border-bottom:1px solid var(--line); font-weight:700; }.card-header h5 { font-size:.94rem; font-weight:700; }.card-body { padding:1.2rem; }
.bg-primary,.btn-primary { background-color:var(--blue)!important; border-color:var(--blue)!important; }.bg-success { background-color:var(--success)!important; }.bg-danger { background-color:var(--danger)!important; }.bg-info { background-color:#1682a7!important; }.text-primary { color:var(--blue)!important; }.btn { border-radius:8px; font-weight:600; padding:.48rem .8rem; }.btn-sm { border-radius:7px; }.form-control,.form-select,.input-group-text { min-height:40px; border-color:#d9e1eb; border-radius:8px; }.input-group > .form-control { border-radius:0 8px 8px 0; }.input-group-text { border-radius:8px 0 0 8px; background:#f8fafc; }.form-control:focus,.form-select:focus { border-color:#85aafa; box-shadow:0 0 0 .2rem rgba(39,110,241,.12); }.form-label { color:#405268; font-size:.8rem; font-weight:650; }
.badge { border-radius:99px; padding:.4em .65em; font-weight:700; letter-spacing:.01em; }.table { --bs-table-bg:transparent; margin-bottom:0; }.table > :not(caption) > * > * { padding:.85rem .75rem; border-color:var(--line); vertical-align:middle; }.table thead th { background:#f8fafc; color:#607187; font-size:.69rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; white-space:nowrap; }.table-hover tbody tr:hover { --bs-table-accent-bg:#f7faff; }.list-group-item { border-color:var(--line); padding:.85rem 1rem; }.list-group-item:first-child { border-top:0; }.list-group-item:last-child { border-bottom:0; }
.customer-area .card.bg-primary,.customer-area .card.bg-info,.customer-area .card.bg-warning,.customer-area .card.bg-success,.admin-area .card.bg-primary,.admin-area .card.bg-info,.admin-area .card.bg-warning,.admin-area .card.bg-danger { border:0; box-shadow:0 9px 22px rgba(25,55,92,.12); }.card[class*="bg-"] .card-title,.card[class*="bg-"] h6 { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; opacity:.85; }.card[class*="bg-"] h2 { font-size:1.85rem; font-weight:750; }
.message-item { padding:.9rem 1rem; margin-bottom:.65rem; border:1px solid var(--line); border-radius:10px; }.message-sent { background:#edf4ff; border-left:4px solid var(--blue); }.message-received { background:#fff; border-left:4px solid #95a4b7; }.message-unread { background:#fff9e8!important; border-left-color:#e9a423!important; font-weight:500; }
.modal-content { border:0; border-radius:14px; overflow:hidden; box-shadow:0 20px 60px rgba(17,37,62,.2); }.modal-header,.modal-footer { border-color:var(--line); }.alert { border:0; border-radius:10px; }.border-success { border-color:#7cd4a7!important; }.border-bottom { border-color:var(--line)!important; } code { color:#245fcf; background:#edf3ff; border-radius:4px; padding:.15rem .3rem; }
body.bg-light { background:linear-gradient(135deg,#eef4ff 0%,#f7f9fc 45%,#eaf7f1 100%)!important; min-height:100vh; }.bg-light .card { border:1px solid rgba(255,255,255,.8); box-shadow:0 18px 50px rgba(39,74,112,.12); }.bg-light .card-body.p-4 { padding:2rem!important; }.bg-light .display-4 { color:var(--blue)!important; }.bg-light h3 { font-weight:750; }
@media (max-width:991.98px) { .app-sidebar { position:fixed; }.app-main { margin-left:0; }.app-topbar { padding:1rem 1.1rem; }.app-content { padding:1.2rem 1rem 2rem; } }
@media (max-width:575.98px) { .app-topbar h1 { font-size:1.12rem; }.app-content { padding:.9rem .75rem 1.5rem; }.card-body { padding:1rem; }.table > :not(caption) > * > * { padding:.72rem .6rem; }.btn { padding:.45rem .65rem; } }