/* =========================================================
   SGD · BASE CSS
   Layout global moderno · Sidebar · Topbar · Responsivo
   ========================================================= */

:root{
  --topbar-h: 64px;

  --sidebar-w: 280px;
  --sidebar-w-collapsed: 84px;

  --bg: #f4f7fb;
  --bg-soft: #eef4ff;
  --surface: #ffffff;
  --surface-2: #f8fbff;

  --text: #0f172a;
  --muted: #64748b;
  --muted-2: #94a3b8;

  --line: #e2e8f0;
  --line-2: rgba(255,255,255,.10);

  --brand: #2563eb;
  --brand-2: #1d4ed8;
  --brand-3: #0f3aa8;
  --brand-soft: rgba(37, 99, 235, .12);

  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;

  --sidebar-bg:
    linear-gradient(180deg, #0f172a 0%, #111c34 42%, #0b1222 100%);

  --shadow-sm: 0 8px 24px rgba(15, 23, 42, .06);
  --shadow-md: 0 16px 38px rgba(15, 23, 42, .10);
  --shadow-lg: 0 24px 64px rgba(2, 6, 23, .18);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;

  --ease: 220ms cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
   RESET / BASE
   ========================================================= */

*,
*::before,
*::after{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.06), transparent 28%),
    radial-gradient(circle at bottom right, rgba(14,165,233,.05), transparent 24%),
    var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open,
body.no-scroll{
  overflow:hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

/* Scrollbar */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.55) transparent;
}

*::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.45);
  border-radius: 999px;
}
*::-webkit-scrollbar-track{
  background: transparent;
}

/* =========================================================
   APP SHELL
   ========================================================= */

.app-shell{
  padding-top: var(--topbar-h);
}

.app{
  display:flex;
  min-height: calc(100vh - var(--topbar-h));
}

/* =========================================================
   TOPBAR
   ========================================================= */

.topbar-slim{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--topbar-h);
  z-index:1600;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding:0 18px;

  background:
    linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.94));
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(2,6,23,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topbar-slim__left,
.topbar-slim__right{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.topbar-slim__brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand-mark{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.5px;
  color:#fff;
  background:
    linear-gradient(135deg, var(--brand), #38bdf8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 22px rgba(37,99,235,.32);
  flex: 0 0 auto;
}

.brand-text{
  font-size:14px;
  font-weight:700;
  color:#e2e8f0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* botão mobile: escondido no desktop */
.mobile-menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:none;
  border-radius:12px;
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  transition:
    background var(--ease),
    transform 120ms ease,
    box-shadow var(--ease);
}

.mobile-menu-btn:hover{
  background: rgba(255,255,255,.14);
  box-shadow: 0 8px 18px rgba(2,6,23,.15);
}

.mobile-menu-btn:active{
  transform: translateY(1px) scale(.98);
}

.modern-user-info{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px 6px 6px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:14px;
  color:#fff;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  flex:0 0 auto;
}

.user-block{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.user-name{
  font-size:13px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.user-role{
  font-size:11px;
  color:#cbd5e1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.btn-login,
.btn-logout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  transition:
    transform 120ms ease,
    background var(--ease),
    color var(--ease),
    border-color var(--ease),
    box-shadow var(--ease);
}

.btn-login{
  color:#fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 22px rgba(37,99,235,.28);
}

.btn-logout{
  color:#e2e8f0;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.btn-login:hover,
.btn-logout:hover{
  transform: translateY(-1px);
}

.btn-logout:hover{
  background: rgba(255,255,255,.12);
}

.btn-login:active,
.btn-logout:active{
  transform: translateY(1px);
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar{
  position:fixed;
  top:var(--topbar-h);
  left:0;
  bottom:0;
  width:var(--sidebar-w);
  z-index:1500;

  display:flex;
  flex-direction:column;
  overflow:hidden;

  background: var(--sidebar-bg);
  color:#e5edf8;
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 10px 0 30px rgba(2,6,23,.16);

  transition:
    width var(--ease),
    left var(--ease),
    transform var(--ease),
    box-shadow var(--ease);
}

.sidebar::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:180px;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.12), transparent 55%),
    radial-gradient(circle at top right, rgba(37,99,235,.14), transparent 45%);
  pointer-events:none;
}

.sidebar-header{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 16px 12px;
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.sidebar-brand__logo{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
  letter-spacing:.5px;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 28px rgba(37,99,235,.24);
  flex:0 0 auto;
}

.sidebar-brand__text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.sidebar-brand__text strong{
  font-size:14px;
  color:#fff;
  white-space:nowrap;
}

.sidebar-brand__text span{
  font-size:12px;
  color:#a9bbd7;
  white-space:nowrap;
}

/* botão interno da sidebar:
   some no desktop, pode existir no mobile */
.toggle-btn{
  width:38px;
  height:38px;
  border:none;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  color:#e2e8f0;
  cursor:pointer;
  transition: background var(--ease), transform 120ms ease;
  flex:0 0 auto;
}

.toggle-btn:hover{
  background: rgba(255,255,255,.12);
}

.toggle-btn:active{
  transform: scale(.98);
}

.sidebar-section-label{
  position:relative;
  z-index:1;
  padding:10px 18px 8px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8fa6c5;
  font-weight:800;
}

.menu{
  position:relative;
  z-index:1;
  list-style:none;
  margin:0;
  padding:8px 12px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:auto;
}

.menu > li{
  list-style:none;
}

.menu li a,
.menu-group > .menu-toggle{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border-radius:16px;
  color:#dbe7f5;
  transition:
    background var(--ease),
    color var(--ease),
    transform 120ms ease,
    box-shadow var(--ease),
    padding var(--ease);
}

.menu li a:hover,
.menu-group > .menu-toggle:hover{
  color:#fff;
  background: rgba(255,255,255,.07);
}

.menu li a:active,
.menu-group > .menu-toggle:active{
  transform: translateY(1px);
}

.menu li a::before,
.menu-group > .menu-toggle::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--ease);
}

.menu li a:hover::before,
.menu-group > .menu-toggle:hover::before{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.menu li a.is-active,
.menu-group.is-open > .menu-toggle{
  background: linear-gradient(135deg, rgba(37,99,235,.32), rgba(56,189,248,.18));
  color:#fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 10px 22px rgba(2,6,23,.16);
}

.ico{
  display:grid;
  place-items:center;
  width:22px;
  min-width:22px;
  font-size:18px;
  line-height:1;
}

.txt{
  min-width:0;
  flex:1 1 auto;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chev{
  font-size:12px;
  color:#9fb3cf;
  transition: transform var(--ease), color var(--ease), opacity var(--ease);
}

.menu-toggle.is-open .chev{
  transform: rotate(180deg);
  color:#fff;
}

.submenu{
  list-style:none;
  margin:6px 0 2px;
  padding:0 0 0 12px;
  display:grid;
  gap:6px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:
    max-height 260ms ease,
    opacity 180ms ease,
    margin 220ms ease,
    padding 220ms ease;
}

.submenu[hidden]{
  max-height:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.submenu.open{
  opacity:1;
  max-height:500px;
}

.submenu li a{
  min-height:42px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
}

.submenu li a:hover{
  background: rgba(255,255,255,.09);
}

.submenu .ico{
  font-size:16px;
}

.sidebar-footer{
  position:relative;
  z-index:1;
  padding:14px;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:auto;
}

.sidebar-footer-card{
  border-radius:18px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.sidebar-footer-card strong{
  color:#fff;
  font-size:13px;
}

.sidebar-footer-card span{
  color:#b7c7db;
  font-size:12px;
  line-height:1.45;
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */

.main-content{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  margin-left:var(--sidebar-w-collapsed);
  padding:22px 22px 30px;
  transition: margin-left var(--ease), padding var(--ease);
}

.modern-main-content{
  position:relative;
}

.modern-main-content > *{
  animation: fadeUp .28s ease;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform: translateY(8px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}

/* =========================================================
   OVERLAY MOBILE
   ========================================================= */

.sidebar-overlay{
  position:fixed;
  inset: var(--topbar-h) 0 0 0;
  z-index:1400;
  background: rgba(2,6,23,.46);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity var(--ease), visibility var(--ease);
}

.sidebar-overlay.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* =========================================================
   HELPERS VISUAIS GLOBAIS
   ========================================================= */

.card,
.panel,
.box{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.section-title,
.page-title{
  margin:0 0 6px;
  font-size:clamp(1.3rem, 1.8vw, 1.8rem);
  line-height:1.15;
  color:var(--text);
}

.section-subtitle,
.page-subtitle{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.btn,
button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 14px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  font-weight:700;
  transition:
    transform 120ms ease,
    box-shadow var(--ease),
    background var(--ease);
}

.btn:hover{
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(1px);
}

.btn-primary{
  color:#fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 28px rgba(37,99,235,.22);
}

.btn-secondary{
  color:var(--text);
  background:#fff;
  border:1px solid var(--line);
}

.btn-ghost{
  color:var(--brand-2);
  background: var(--brand-soft);
}

.input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea{
  width:100%;
  min-height:44px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--text);
  outline:none;
  transition:
    border-color var(--ease),
    box-shadow var(--ease),
    background var(--ease);
}

textarea{
  min-height:110px;
  resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
  border-color: rgba(37,99,235,.42);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

table{
  width:100%;
  border-collapse:collapse;
}

th,
td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid var(--line);
}

th{
  color:#334155;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

td{
  color:var(--text);
  font-size:14px;
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 769px){

  /* botão hamburger fora da sidebar: nunca aparece no PC */
  .mobile-menu-btn{
    display:none !important;
  }

  /* botão interno também some no desktop */
  .toggle-btn{
    display:none !important;
  }

  /* sidebar começa recolhida */
  .sidebar{
    width: var(--sidebar-w-collapsed);
  }

  /* expandida por hover / JS */
  .sidebar.is-pinned{
    width: var(--sidebar-w);
    box-shadow: 16px 0 40px rgba(2,6,23,.20);
  }

  .sidebar.is-collapsed{
    width: var(--sidebar-w-collapsed);
  }

  /* conteúdo acompanha */
  .sidebar + .main-content,
  .sidebar ~ .main-content{
    margin-left: var(--sidebar-w-collapsed);
  }

  .sidebar.is-pinned + .main-content,
  .sidebar.is-pinned ~ .main-content{
    margin-left: var(--sidebar-w);
  }

  .sidebar.is-collapsed + .main-content,
  .sidebar.is-collapsed ~ .main-content{
    margin-left: var(--sidebar-w-collapsed);
  }

  /* recolhida */
  .sidebar.is-collapsed .sidebar-brand__text,
  .sidebar.is-collapsed .sidebar-section-label,
  .sidebar.is-collapsed .sidebar-footer{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .sidebar.is-collapsed .sidebar-header{
    justify-content:center;
    padding:16px 10px 12px;
  }

  .sidebar.is-collapsed .menu{
    padding-left:10px;
    padding-right:10px;
  }

  .sidebar.is-collapsed .menu li a,
  .sidebar.is-collapsed .menu-group > .menu-toggle{
    justify-content:center;
    padding-left:12px;
    padding-right:12px;
    gap:0;
  }

  .sidebar.is-collapsed .txt,
  .sidebar.is-collapsed .chev{
    opacity:0;
    width:0;
    overflow:hidden;
    pointer-events:none;
  }

  .sidebar.is-collapsed .submenu{
    max-height:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-left:0 !important;
  }

  .sidebar.is-collapsed .ico{
    margin:0;
  }

  /* expandida */
  .sidebar.is-pinned .sidebar-brand__text,
  .sidebar.is-pinned .sidebar-section-label,
  .sidebar.is-pinned .sidebar-footer{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .sidebar.is-pinned .txt,
  .sidebar.is-pinned .chev{
    opacity:1;
    width:auto;
    pointer-events:auto;
  }
}

/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 768px){

  .mobile-menu-btn{
    display:inline-flex;
  }

  .toggle-btn{
    display:inline-flex;
  }

  .topbar-slim{
    padding:0 12px;
  }

  .topbar-slim__right{
    gap:8px;
  }

  .brand-text{
    max-width:160px;
  }

  .modern-user-info{
    padding:4px 8px 4px 4px;
  }

  .user-block{
    max-width:110px;
  }

  .sidebar{
    left:-100%;
    width:min(86vw, 300px);
    max-width:300px;
    height:calc(100vh - var(--topbar-h));
    box-shadow: 18px 0 42px rgba(2,6,23,.24);
  }

  .sidebar.is-mobile-open{
    left:0;
  }

  .sidebar .sidebar-brand__text,
  .sidebar .sidebar-section-label,
  .sidebar .sidebar-footer,
  .sidebar .txt,
  .sidebar .chev{
    opacity:1;
    visibility:visible;
    width:auto;
    pointer-events:auto;
    display:initial;
  }

  .main-content{
    margin-left:0 !important;
    padding:18px 14px 24px;
  }
}

/* =========================================================
   MOBILE MENOR
   ========================================================= */

@media (max-width: 560px){

  .topbar-slim{
    gap:10px;
  }

  .topbar-slim__left,
  .topbar-slim__right{
    gap:8px;
  }

  .brand-text{
    display:none;
  }

  .modern-user-info{
    background: transparent;
    border-color: transparent;
    padding:0;
  }

  .user-block{
    display:none;
  }

  .avatar{
    width:34px;
    height:34px;
    font-size:13px;
  }

  .btn-login,
  .btn-logout{
    min-height:34px;
    padding:0 10px;
    font-size:12px;
    border-radius:10px;
  }

  .main-content{
    padding:16px 12px 22px;
  }

  .sidebar{
    width:min(90vw, 290px);
  }

  .menu{
    padding:8px 10px 14px;
  }

  .menu li a,
  .menu-group > .menu-toggle{
    min-height:46px;
    padding:11px 12px;
    border-radius:14px;
  }

  .submenu{
    padding-left:8px;
  }

  th,
  td{
    padding:10px 10px;
  }
}

/* =========================================================
   TELAS MUITO BAIXAS
   ========================================================= */

@media (max-height: 720px){
  .sidebar-header{
    padding:14px 14px 10px;
  }

  .sidebar-brand__logo{
    width:42px;
    height:42px;
  }

  .menu{
    gap:4px;
  }

  .menu li a,
  .menu-group > .menu-toggle{
    min-height:44px;
  }

  .sidebar-footer{
    padding:10px 12px;
  }

  .sidebar-footer-card{
    padding:12px;
  }
}
.user-block-inline{
  display:flex;
  align-items:center;
  gap:.45rem;

  max-width:520px;

  overflow:hidden;
  white-space:nowrap;
}

.user-name{
  font-weight:700;
  color:#ffffff;

  overflow:hidden;
  text-overflow:ellipsis;
}

.user-role{
  font-size:.78rem;
  font-weight:700;

  color:#ffffff;

  flex-shrink:0;
}

.user-clinica-inline{
  display:flex;
  align-items:center;
  gap:.28rem;

  font-size:.76rem;
  font-weight:600;

  color:#ffffff;

  overflow:hidden;
  text-overflow:ellipsis;
}

.user-divider{
  color:#ffffff;
  font-weight:700;
  flex-shrink:0;
}

.modern-user-info{
  display:flex;
  align-items:center;
  gap:.75rem;
}