/* Rance Clinic Portal v1.7.0 — Modern Professional UI Layer
   UI-only enhancement: preserves the Rance brown/gold/ivory identity and existing app logic. */

:root{
  --surface-soft:#fffdf8;
  --surface-muted:#f8f1e4;
  --surface-warm:#f3e8d3;
  --line-strong:#d9c9ac;
  --ink-muted:#8a7a62;
  --gold-ring:rgba(201,154,68,.22);
  --shadow-xs:0 1px 2px rgba(30,24,18,.04);
  --shadow-sm:0 8px 22px rgba(30,24,18,.06);
  --shadow-md:0 18px 44px rgba(30,24,18,.09);
  --shadow-lg:0 30px 70px rgba(20,15,10,.18);
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:26px;
}

html{scroll-behavior:smooth;}
body{
  min-height:100vh;
  background:
    radial-gradient(900px 460px at 85% -10%, rgba(201,154,68,.08), transparent 60%),
    var(--ivory);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body,button,input,select,textarea{font-variant-numeric:tabular-nums;}
a,button,.sb-item,.shortcut,.chip,.price-tab,.admin-tab,.mini-btn,.row-copy,.copy-btn{ -webkit-tap-highlight-color:transparent; }
button,input,select,textarea{outline:none;}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.sb-item:focus-visible,.shortcut:focus-visible{
  box-shadow:0 0 0 3px var(--gold-ring)!important;
  border-color:var(--gold)!important;
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--gold-deep);}

/* ===== App shell ===== */
.app{min-height:100dvh;background:transparent;}
.main{min-height:100dvh;}
.content{
  width:100%;
  max-width:1680px;
  margin:0 auto;
  padding:34px 38px 52px;
}
.page-head{margin-bottom:22px;padding-bottom:15px;border-bottom:1px solid rgba(217,201,172,.72);}
.page-head h2{font-size:28px;line-height:1.15;letter-spacing:-.015em;}
.page-head p{font-size:13px;color:var(--ink-muted);max-width:720px;}

/* ===== Sidebar ===== */
.sidebar{
  width:278px;
  padding:20px 16px 18px;
  background:
    radial-gradient(360px 240px at 20% 0%, rgba(201,154,68,.13), transparent 68%),
    linear-gradient(180deg,#211a13 0%,#1d1711 100%);
  border-inline-end:1px solid rgba(255,255,255,.045);
  box-shadow:18px 0 50px rgba(30,24,18,.04);
  scrollbar-width:thin;
  scrollbar-color:#5a4630 transparent;
}
.sidebar::-webkit-scrollbar{width:6px;}
.sidebar::-webkit-scrollbar-thumb{background:#5a4630;border-radius:99px;}
.sb-brand{
  min-height:74px;
  gap:12px;
  margin-bottom:4px;
  padding:8px 10px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sb-brand img{height:38px;max-width:116px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.12));}
.sb-brand div h1{font-size:20px;line-height:1.1;}
.sb-brand div p{font-size:10.5px;color:#aa9a7d;margin-top:4px;}
.sb-section-title{
  padding:17px 12px 7px;
  color:#8f8067;
  font-size:10px;
  font-weight:800;
  letter-spacing:.085em;
  text-transform:uppercase;
}
.sb-item{
  min-height:43px;
  gap:11px;
  margin:2px 0;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:12px;
  color:#d0c2a7;
  font-size:13.5px;
  font-weight:500;
  position:relative;
  overflow:hidden;
}
.sb-item .ic{display:grid;place-items:center;width:22px;height:22px;color:#bdaa87;}
.sb-item:hover{
  transform:translateX(-2px);
  border-color:rgba(255,255,255,.06);
  background:rgba(255,255,255,.055);
  color:#fff9ec;
}
.sb-item.active{
  background:linear-gradient(135deg,#d2a34c 0%,#c18c37 100%);
  color:#241a0e;
  border-color:rgba(255,255,255,.14);
  box-shadow:0 9px 22px rgba(201,154,68,.17), inset 0 1px 0 rgba(255,255,255,.25);
}
.sb-item.active .ic{color:#241a0e;}
.sb-account{
  margin-top:14px;
  padding:12px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.075);
  border-radius:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.sb-account .avatar{width:38px;height:38px;box-shadow:0 7px 16px rgba(201,154,68,.16);}
.sb-account .who{font-size:12.5px;}
.sb-foot{padding-top:12px;color:#75664f;}

/* ===== Topbar ===== */
.topbar{
  min-height:68px;
  gap:14px;
  padding:12px 34px;
  background:rgba(255,253,248,.94);
  border-bottom:1px solid rgba(217,201,172,.7);
  box-shadow:0 5px 22px rgba(30,24,18,.035);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.tb-icon{
  width:40px;height:40px;
  background:var(--surface-soft);
  border-color:var(--line);
  border-radius:12px;
  transition:.18s ease;
  box-shadow:var(--shadow-xs);
}
.tb-icon:hover{background:var(--surface-warm);color:var(--gold-deep);transform:translateY(-1px);}
.tb-profile{padding:4px 0;}
.tb-profile .avatar{width:38px;height:38px;box-shadow:0 6px 16px rgba(201,154,68,.16);}
.tb-profile .name{font-size:13.5px;color:var(--ink);}
.tb-profile .role{font-size:10.5px;color:var(--ink-muted);}
.tb-location{
  min-height:40px;
  padding:8px 14px;
  background:var(--surface-soft);
  border-color:var(--line);
  border-radius:12px;
  box-shadow:var(--shadow-xs);
}
.tb-location select{font-weight:600;max-width:220px;}
.tb-lang{
  min-height:38px;
  padding:7px 11px;
  border-radius:10px;
  transition:.18s ease;
}
.tb-lang:hover{background:var(--surface-warm);color:var(--gold-deep);}
#mobileNav{
  min-height:42px;
  padding:8px 12px;
  border-color:var(--line-strong);
  border-radius:12px;
  background:var(--surface-soft);
  box-shadow:var(--shadow-xs);
  font-weight:700;
}

/* ===== Dashboard hero ===== */
.banner{
  margin-bottom:24px;
  padding:36px 38px;
  border-radius:var(--radius-xl);
  background:
    linear-gradient(118deg,rgba(39,29,19,.98),rgba(31,24,17,.98)),
    var(--sidebar);
  border:1px solid rgba(201,154,68,.18);
  box-shadow:0 24px 52px -28px rgba(30,24,18,.68);
  isolation:isolate;
}
.banner::before{
  content:"";
  position:absolute;
  width:260px;height:260px;
  inset-inline-end:-78px;top:-116px;
  border:1px solid rgba(201,154,68,.18);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(201,154,68,.035),0 0 0 76px rgba(201,154,68,.022);
  z-index:-1;
}
.banner::after{
  background:
    radial-gradient(420px 260px at 88% -10%,rgba(201,154,68,.25),transparent 66%),
    linear-gradient(90deg,transparent,rgba(255,255,255,.012));
  z-index:-1;
}
.banner .date{font-size:12px;font-weight:700;letter-spacing:.02em;color:#d8c79f;}
.banner h2{font-size:31px;line-height:1.16;margin-bottom:8px;}
.banner p{margin:0;font-size:13.5px;line-height:1.7;color:#d1c3aa;}
.banner-actions{align-self:center;}
.bt{
  min-height:43px;
  padding:10px 18px;
  border-radius:12px;
  box-shadow:none;
}
.bt-solid{background:linear-gradient(135deg,#d2a34c,#bd8735);box-shadow:0 9px 18px rgba(201,154,68,.15);}
.bt-solid:hover{background:linear-gradient(135deg,#e0b65f,#c89945);transform:translateY(-1px);}
.bt-ghost:hover{transform:translateY(-1px);}

/* ===== Cards / panels ===== */
.stat-row{gap:18px;margin-bottom:24px;}
.stat-card,.panel,.doctor-card,.info-card,.faq-card,.admin-card,.notice-item{
  border-color:rgba(217,201,172,.78);
  background:linear-gradient(180deg,#fff 0%,#fffefb 100%);
  box-shadow:var(--shadow-sm);
}
.stat-card{
  min-height:108px;
  padding:21px 22px;
  border-radius:18px;
  border-inline-start-width:4px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.stat-card .num{font-size:36px;line-height:1;}
.stat-card .lbl{font-size:12.5px;color:var(--ink-muted);margin-top:6px;}
.stat-card .stico{
  width:48px;height:48px;
  border-radius:14px;
  background:linear-gradient(145deg,var(--surface-warm),#fbf6ea);
  border:1px solid rgba(217,201,172,.72);
  color:var(--gold-deep);
}
.dash-grid{gap:20px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);}
.panel{padding:24px;border-radius:20px;}
.panel-head{margin-bottom:16px;}
.panel-head h3{font-size:20px;}
.panel-head p{font-size:11.5px;color:var(--ink-muted);margin:3px 0 0;}
.shortcut{
  min-height:61px;
  margin:0 -5px;
  padding:12px 10px;
  border-bottom-color:rgba(231,220,196,.7);
}
.shortcut:hover{background:linear-gradient(90deg,var(--surface-soft),var(--surface-muted));transform:translateX(-2px);}
.shortcut .sic{
  width:42px;height:42px;border-radius:12px;
  background:var(--surface-warm);
  border:1px solid rgba(217,201,172,.68);
  color:var(--gold-deep);
}
.shortcut .stitle{font-size:13.5px;}
.shortcut .ssub{font-size:11.25px;color:var(--ink-muted);}
.shortcut .chev{font-size:20px;color:#b89b66;}
.avail-row{padding:7px 0;margin-bottom:11px;}
.avail-row .al{margin-bottom:8px;color:var(--ink-soft);}
.avail-bar{height:9px;background:#eee4d2;box-shadow:inset 0 1px 2px rgba(30,24,18,.04);}
.avail-bar>div{transition:width .45s ease;}
.avail-metric .avail-percent{background:var(--surface-muted);}

/* ===== Generic card collections ===== */
.doctor-grid,.card-grid2,.card-grid4,.admin-grid{gap:18px;}
.doctor-card,.info-card,.faq-card,.admin-card{border-radius:18px;}
.doctor-card,.info-card{padding:22px;}
.doctor-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.doctor-card:hover,.info-card.branch-card-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.doctor-card .band{height:5px;}
.dept-tag,.branch-pill,.shared-note,.status-pill,.today-badge,.offer-status{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.branch-pill{padding:4px 10px;background:var(--surface-muted);}
.info-card h3{font-size:20px;}
.info-card p{line-height:1.7;color:var(--ink-muted);}
.eom-widget-wrap{box-shadow:var(--shadow-sm);}

/* ===== Tabs, chips and actions ===== */
.filter-chips,.price-tabs,.admin-tabs{gap:9px;}
.chip,.price-tab,.admin-tab{
  min-height:38px;
  border-color:var(--line);
  background:var(--surface-soft);
  box-shadow:var(--shadow-xs);
  transition:.18s ease;
}
.chip:hover,.price-tab:hover,.admin-tab:hover{border-color:#cdb88e;background:var(--surface-warm);color:var(--ink);}
.chip.active,.price-tab.active,.admin-tab.active{
  background:linear-gradient(135deg,#30251a,#211a13);
  color:#fffaf0;
  border-color:#30251a;
  box-shadow:0 8px 16px rgba(30,24,18,.11);
}
.offer-actions button,.row-copy,.copy-btn,.mini-btn{
  min-height:34px;
  border-radius:9px;
  transition:.18s ease;
}
.mini-btn{padding:7px 10px;background:var(--surface-soft);}
.mini-btn:hover{background:var(--surface-warm);border-color:#cdb88e;transform:translateY(-1px);}
.mini-btn.primary{background:linear-gradient(135deg,#30251a,#211a13);}
.mini-btn.primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);}
.mini-btn.danger:hover{background:#fff2ef;border-color:#e3b8ae;}

/* ===== Forms ===== */
.price-controls input,
.mform input,.mform select,.mform textarea,
.admin-form input,.admin-form select,.admin-form textarea,
.login-field input{
  width:100%;
  min-height:44px;
  padding:10px 13px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fffdf9;
  color:var(--ink);
  box-shadow:inset 0 1px 1px rgba(30,24,18,.015);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
textarea{resize:vertical;line-height:1.65;}
.price-controls input:focus,
.mform input:focus,.mform select:focus,.mform textarea:focus,
.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus,
.login-field input:focus{
  border-color:var(--gold);
  background:#fff;
  box-shadow:0 0 0 3px var(--gold-ring)!important;
}
.mform label,.admin-form label,.login-field{color:var(--ink-soft);font-weight:700;}
.mform{gap:15px;}
.mform .mrow{gap:14px;}
.msubmit,.login-box .lbtn{
  min-height:45px;
  border-radius:12px;
  background:linear-gradient(135deg,#30251a,#211a13);
  box-shadow:0 9px 18px rgba(30,24,18,.09);
  transition:.18s ease;
}
.msubmit:hover,.login-box .lbtn:hover{background:linear-gradient(135deg,#ba8334,#a9793b);transform:translateY(-1px);}
.auth-help{line-height:1.7;}

/* ===== Tables ===== */
.table-wrap,.permission-matrix{
  border-color:rgba(217,201,172,.84);
  border-radius:15px;
  overflow:auto;
  background:#fff;
  box-shadow:var(--shadow-xs);
  scrollbar-width:thin;
  scrollbar-color:#c7b28d #f7f0e4;
}
.table-wrap::-webkit-scrollbar,.permission-matrix::-webkit-scrollbar{height:9px;width:9px;}
.table-wrap::-webkit-scrollbar-track,.permission-matrix::-webkit-scrollbar-track{background:#f7f0e4;}
.table-wrap::-webkit-scrollbar-thumb,.permission-matrix::-webkit-scrollbar-thumb{background:#c7b28d;border-radius:99px;border:2px solid #f7f0e4;}
table{background:#fff;}
thead th,.admin-table th{
  background:linear-gradient(180deg,#f5ead5,#f1e4cc);
  color:#75644e;
  font-weight:800;
  letter-spacing:.01em;
  border-bottom:1px solid #ddccb0;
  white-space:nowrap;
}
thead th{padding:12px 15px;}
td,.admin-table td{padding:12px 15px;border-color:#eee4d4;}
tbody tr{transition:background .14s ease;}
tbody tr:hover{background:#fffaf1;}
.admin-table th,.admin-table td{padding:11px 12px;}
.admin-card>.table-wrap,.admin-card>.permission-matrix{margin-top:12px;}

/* ===== Administration ===== */
.admin-card{padding:21px;position:relative;overflow:hidden;}
.admin-card::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--gold),rgba(201,154,68,.15));
  opacity:.7;
}
.admin-card h3{font-size:19px;margin-bottom:13px;}
.admin-actions{gap:8px;}
.notice-list{gap:12px;}
.notice-item{padding:14px;border-radius:13px;}
.notice-item.unread{background:linear-gradient(90deg,rgba(201,154,68,.05),#fff);}
.log-box{border:1px solid rgba(201,154,68,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}

/* ===== Modal / dialog ===== */
.modal-overlay,.confirm-overlay{
  background:rgba(23,17,12,.58);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.modal-box{
  max-width:620px;
  width:min(620px,100%);
  padding:0;
  border:1px solid rgba(217,201,172,.85);
  border-radius:22px;
  background:#fffefb;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.modal-head{
  position:sticky;top:0;z-index:3;
  margin:0;
  padding:20px 22px 16px;
  background:rgba(255,254,251,.95);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.modal-head h3{font-size:23px;}
.modal-close{
  width:36px;height:36px;
  background:var(--surface-muted);
  border:1px solid var(--line);
  transition:.16s ease;
}
.modal-close:hover{background:#f4dfd9;color:var(--red);transform:rotate(4deg);}
.modal-box>.mform{padding:20px 22px 24px;}
.confirm-box{
  border:1px solid rgba(217,201,172,.85);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
}
.confirm-actions button:disabled{cursor:not-allowed;filter:grayscale(.25);}
.notice-delete-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;}
.notice-delete-row .mini-btn{flex:0 0 auto;padding:6px 10px;}

/* ===== Login ===== */
.login-screen{
  background:
    radial-gradient(600px 420px at 18% 12%,rgba(201,154,68,.22),transparent 64%),
    radial-gradient(520px 380px at 88% 84%,rgba(185,122,86,.13),transparent 68%),
    linear-gradient(145deg,#241b12 0%,#18120d 100%);
}
.login-screen::before{
  content:"";
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 86%);
  pointer-events:none;
}
.login-box{
  position:relative;
  max-width:430px;
  padding:36px 34px 30px;
  border:1px solid rgba(201,154,68,.2);
  border-radius:26px;
  background:rgba(255,253,248,.985);
  box-shadow:0 38px 90px -30px rgba(0,0,0,.68);
}
.login-box .lbrand{margin-bottom:24px;}
.login-box .lbrand img{height:43px;max-width:170px;object-fit:contain;}
.login-box .lbrand h2{font-size:25px;margin-top:2px;}
.login-box .lbrand p{font-size:12px;color:var(--ink-muted);margin:0;}
.login-auth-tabs{padding:4px;background:var(--surface-muted);border:1px solid var(--line);border-radius:12px;}
.login-auth-tabs button{border:none;background:transparent;box-shadow:none;}
.login-auth-tabs button.active{background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(30,24,18,.07);border:none;}
.forgot-password-link{background:#fff;border-color:var(--line);}
.login-note{line-height:1.55;}

/* ===== Toast / EOM finishing ===== */
.toast{border-radius:13px;box-shadow:0 18px 36px -16px rgba(0,0,0,.44);}
.eom-wrap{border:1px solid rgba(201,154,68,.2);box-shadow:var(--shadow-md);}
.eom-mini{border:1px solid rgba(201,154,68,.18);border-radius:18px;}

/* ===== Responsive refinement ===== */
@media (max-width:1280px){
  .sidebar{width:258px;}
  .content{padding:30px 28px 46px;}
  .doctor-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .card-grid4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:1100px){
  .topbar{padding:11px 18px;}
  .content{padding:24px 20px 40px;}
  .stat-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .dash-grid{grid-template-columns:1fr;}
  #mobileNav{display:block;max-width:210px;}
}
@media (max-width:820px){
  .topbar{gap:10px;}
  .tb-lang{font-size:12px;padding-inline:8px;}
  .stat-row{grid-template-columns:1fr;gap:12px;}
  .stat-card{min-height:92px;}
  .doctor-grid,.card-grid2,.card-grid4,.admin-grid{grid-template-columns:1fr;}
  .page-head{align-items:flex-start;}
  .banner{padding:28px 24px;}
  .banner h2{font-size:27px;}
  .banner-actions{width:100%;}
  .banner-actions .bt{flex:1;justify-content:center;}
  .table-wrap table,.permission-matrix table{min-width:720px;}
}
@media (max-width:680px){
  .content{padding:16px 12px 32px;}
  .topbar{padding:9px 10px;min-height:60px;}
  .tb-profile{display:none;}
  .tb-lang{margin-inline-start:auto;}
  #mobileNav{max-width:min(52vw,205px);min-height:40px;}
  .page-head{margin-bottom:16px;padding-bottom:12px;}
  .page-head h2{font-size:24px;}
  .banner{padding:24px 18px;border-radius:20px;}
  .banner::before{display:none;}
  .banner h2{font-size:25px;}
  .banner p{font-size:12.5px;}
  .banner-actions{gap:8px;}
  .bt{padding:9px 12px;font-size:12px;}
  .panel,.doctor-card,.info-card,.faq-card,.admin-card{padding:17px;border-radius:16px;}
  .mform .mrow{grid-template-columns:1fr;}
  .modal-overlay{padding:10px;align-items:flex-end;}
  .modal-box{max-height:92dvh;border-radius:20px 20px 12px 12px;}
  .modal-head{padding:16px;}
  .modal-box>.mform{padding:16px 16px 20px;}
  .login-screen{padding:12px;}
  .login-box{padding:28px 20px 22px;border-radius:22px;}
  .toast-stack{left:12px;right:12px;bottom:12px;}
  .toast{width:100%;}
}
@media (max-width:430px){
  #mobileNav{max-width:48vw;font-size:12px;}
  .tb-icon{width:38px;height:38px;}
  .tb-lang{font-size:0;gap:0;}
  .tb-lang .ic{width:18px!important;height:18px!important;}
  .banner-actions{flex-direction:column;}
  .offer-actions{flex-wrap:wrap;}
  .offer-actions button{min-width:calc(50% - 4px);}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
}