/* ==========================================================================
   Borng Peth HIS — app frame + theme (v14 mockup palette applied site-wide)
   Loaded after his.css / patients.css: the :root block below intentionally
   redefines the shared color variables those files already use (--navy,
   --blue, --line, --bg, --ink, --muted, --gold, --cyan, --danger, --success)
   to the mockup 14 palette, then adds the frame-specific pieces (sidebar,
   topbar, profile menu) mockup 14 introduced that this app didn't have yet.
   ========================================================================== */

:root{
  /* -- re-themed shared tokens (already used across his.css / patients.css) -- */
  --navy:#0f2f4c;
  --blue:#1e6fbf;
  --line:#dbe3ea;
  --bg:#f4f7fa;
  --ink:#1a2733;
  --muted:#4b5b6b;
  --gold:#a6650b;
  --cyan:#eaf2fb;
  --danger:#b3261e;
  --success:#1a7a4c;
  --white:#ffffff;

  /* -- new tokens mockup 14 adds for the frame / component set -- */
  --navy-2:#153f66;
  --teal:#0e7c86;
  --ink-soft:#4b5b6b;
  --line-soft:#eef2f6;
  --card:#ffffff;
  --blue-light:#eaf2fb;
  --amber:#a6650b;
  --amber-bg:#fdf1de;
  --green:#1a7a4c;
  --green-bg:#e7f6ee;
  --red:#b3261e;
  --red-bg:#fdeceb;
  --slate:#5b6b7a;
  --slate-bg:#eef1f4;
  --radius:10px;
}

/* ==========================================================================
   App shell: sidebar + main column
   ========================================================================== */
.app-shell{
  display:flex;align-items:stretch;min-height:100vh;background:var(--bg);
}

.app-sidebar{
  flex:0 0 216px;width:216px;background:var(--navy);color:#dbe7f2;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  overflow:hidden;z-index:40;
}
.sb-logo{
  display:flex;align-items:center;gap:9px;padding:16px 14px 14px 14px;
  border-bottom:1px solid rgba(255,255,255,.1);flex:0 0 auto;
  color:inherit;text-decoration:none;
}
.sb-logo .mark{
  width:30px;height:30px;border-radius:8px;background:var(--blue);color:#fff;font-weight:800;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.sb-logo .name{font-size:13px;font-weight:700;color:#fff;line-height:1.25;}
.sb-logo .name small{display:block;font-weight:400;color:#93aec6;font-size:10px;}

.sb-scroll{flex:1;overflow-y:auto;padding:8px 0 10px 0;}
.sb-section{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6f90ac;
  padding:13px 14px 5px 14px;
}
.sb-item{
  display:flex;align-items:center;gap:9px;padding:8px 14px;font-size:12.5px;font-weight:600;
  color:#cfe0f0;text-decoration:none;border-left:3px solid transparent;position:relative;
}
.sb-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.sb-item .badge2{
  width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,.1);color:#fff;
  font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.sb-item .lbl{flex:1;}
.sb-item.active{background:rgba(255,255,255,.08);border-left-color:var(--blue);color:#fff;}
.sb-item.active .badge2{background:var(--blue);}
.sb-item.dim{opacity:.4;}

.sb-footer{
  flex:0 0 auto;border-top:1px solid rgba(255,255,255,.1);padding:10px 14px;
  font-size:10px;color:#5f7f9c;
}

.mobile-menu-btn{
  display:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;
  border-radius:6px;padding:6px 10px;font-size:14px;cursor:pointer;margin-right:6px;font-family:inherit;
}

/* ==========================================================================
   Main column: topbar + page content
   ========================================================================== */
.app-main{flex:1;min-width:0;display:flex;flex-direction:column;}

.app-topbar{
  background:var(--navy-2);color:#fff;padding:10px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:30;
}
.app-topbar .brand{
  font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
}
.app-topbar .brand .dot{width:8px;height:8px;border-radius:50%;background:#4fd1c5;flex:0 0 auto;}
.app-topbar .top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.app-topbar .top-actions select{
  font-size:12px;font-weight:600;padding:6px 9px;border-radius:7px;background:#fff;border:1px solid var(--line);
  color:var(--ink);font-family:inherit;
}
.app-topbar .language-switcher{
  display:flex;gap:2px;padding:3px;background:rgba(255,255,255,.08);border-radius:20px;
}
.app-topbar .language-switcher button{
  border:none;background:none;color:#cfe0f0;font-size:11.5px;font-weight:700;padding:5px 10px;
  border-radius:20px;cursor:pointer;font-family:inherit;
}
.app-topbar .language-switcher button.active{background:#fff;color:var(--navy-2);}
.app-topbar .language-switcher span{display:none;}

/* -- profile menu -- */
.profile-wrap{position:relative;}
.profile-trigger{
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:22px;padding:4px 10px 4px 4px;cursor:pointer;color:#fff;font:inherit;
}
.profile-trigger:hover{background:rgba(255,255,255,.14);}
.pm-avatar-sm{
  width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-size:10.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.pm-trigger-text{display:flex;flex-direction:column;line-height:1.2;text-align:left;}
.pm-trigger-name{font-size:12px;font-weight:700;color:#fff;}
.pm-trigger-role{font-size:10px;color:#b9c9da;}
.pm-chevron{font-size:9px;color:#b9c9da;margin-left:2px;}

.profile-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;width:280px;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:11px;box-shadow:0 14px 34px rgba(15,47,76,.22);z-index:80;overflow:hidden;
  text-align:left;max-height:80vh;overflow-y:auto;
}
.profile-menu.open{display:block;}
.pm-header{display:flex;gap:12px;align-items:center;padding:14px;}
.pm-avatar-lg{
  width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;border:2px solid var(--blue-light);
}
.pm-name{font-size:13.5px;font-weight:700;color:var(--ink);}
.pm-role{font-size:11.5px;color:var(--ink-soft);}
.pm-divider{height:1px;background:var(--line-soft);}
.pm-section-label{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8296a6;padding:10px 14px 4px 14px;}
.pm-fac{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 14px;font-size:12px;color:var(--ink);}
.pm-fac select{flex:1;font-size:12px;padding:5px 7px;border-radius:6px;border:1px solid var(--line);font-family:inherit;}
.pm-item{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:12.5px;font-weight:600;color:var(--ink);}
.pm-logout{color:var(--red);width:100%;background:none;border:none;text-align:left;cursor:pointer;font-family:inherit;}
.pm-logout:hover{background:#fbf4f3;}
.pm-item-badge{
  width:22px;height:22px;border-radius:6px;background:var(--blue-light);color:var(--blue);font-size:9.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.pm-logout .pm-item-badge{background:var(--red-bg);color:var(--red);}

/* ==========================================================================
   Page content area (existing .container / component CSS from his.css and
   patients.css keeps working unchanged inside here)
   ========================================================================== */
.app-content{flex:1;padding:8px 4vw 40px 4vw;}
.app-content .container{margin:24px auto 0 auto;width:100%;}
.app-footer{max-width:1180px;margin:0 auto;padding:0 4vw 28px 4vw;font-size:11.5px;color:#8296a6;}

/* ==========================================================================
   Responsive: collapse sidebar to icons, then to an off-canvas drawer
   ========================================================================== */
@media (max-width:980px){
  .app-sidebar{flex:0 0 60px;width:60px;position:fixed;left:0;top:0;bottom:0;}
  .sb-logo .name,.sb-item .lbl,.sb-section{display:none;}
  .sb-logo{justify-content:center;padding:14px 6px;}
  .sb-item{justify-content:center;padding:10px 0;}
  .app-shell{padding-left:60px;}
  .app-topbar .crumbs{display:none;}
}
@media (max-width:640px){
  .app-shell{padding-left:0;}
  .app-sidebar{display:none;}
  .app-sidebar.mobile-open{
    display:flex;width:220px;flex:0 0 220px;box-shadow:4px 0 18px rgba(0,0,0,.25);
  }
  .app-sidebar.mobile-open .sb-logo .name,.app-sidebar.mobile-open .sb-item .lbl,
  .app-sidebar.mobile-open .sb-section{display:block;}
  .app-sidebar.mobile-open .sb-item{justify-content:flex-start;padding:8px 14px;}
  .app-sidebar.mobile-open .sb-logo{justify-content:flex-start;padding:14px;}
  .mobile-menu-btn{display:inline-block;}
  .app-topbar .top-actions select{max-width:120px;}
  .pm-trigger-text{display:none;}
  .app-content{padding:8px 4vw 32px 4vw;}
}