/* ============================================================
   Sistema de Prontuários — Estilos Personalizados
   ============================================================ */

:root {
  --sidebar-width:       250px;
  --sidebar-collapsed:   72px;
  --sidebar-bg:          #0f172a;
  --sidebar-hover:       #1e293b;
  --sidebar-active:      #3b82f6;
  --sidebar-text:        #94a3b8;
  --sidebar-text-active: #f1f5f9;
  --topbar-height:       60px;
  --topbar-bg:           #ffffff;
  --body-bg:             #f1f5f9;
  --card-radius:         12px;
  --font-family:         'Inter', sans-serif;
}

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

body {
  font-family: var(--font-family);
  background:  var(--body-bg);
  color:        #1e293b;
  min-height:   100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
#sidebar {
  width:       var(--sidebar-width);
  min-height:  100vh;
  background:  var(--sidebar-bg);
  flex-shrink: 0;
  transition:  width .25s ease;
  overflow:    hidden;
  position:    sticky;
  top:         0;
  height:      100vh;
}

.sidebar-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     22px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;
}

.brand-icon {
  font-size:    1.5rem;
  color:        var(--sidebar-active);
  flex-shrink:  0;
}

.brand-text {
  font-size:    1.1rem;
  font-weight:  700;
  color:        #f1f5f9;
  letter-spacing: .3px;
}

/* Nav links */
.sidebar-nav {
  padding: 8px 0;
  list-style: none;
  margin: 0;
}

.sidebar-nav .nav-link {
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      11px 20px;
  color:        var(--sidebar-text);
  font-size:    .875rem;
  font-weight:  500;
  border-radius: 0;
  transition:   background .15s, color .15s;
  white-space:  nowrap;
  text-decoration: none;
}

.sidebar-nav .nav-link i {
  font-size:   1.1rem;
  flex-shrink: 0;
}

.sidebar-nav .nav-link:hover {
  background: var(--sidebar-hover);
  color:      var(--sidebar-text-active);
}

.sidebar-nav .nav-link.active {
  background: var(--sidebar-active);
  color:      #fff;
  font-weight: 600;
}

/* Footer */
.sidebar-footer {
  padding:      16px 20px;
  border-top:   1px solid rgba(255,255,255,.06);
  display:      flex;
  flex-direction: column;
  gap:          10px;
}

.user-info {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.user-avatar { font-size: 1.8rem; color: var(--sidebar-text); }
.user-name   { font-size: .85rem; font-weight: 600; color: var(--sidebar-text-active); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role   { font-size: .7rem; color: var(--sidebar-text); text-transform: capitalize; }

.btn-logout {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     8px 12px;
  border-radius: 8px;
  background:  rgba(255,255,255,.05);
  color:       var(--sidebar-text);
  font-size:   .8rem;
  font-weight: 500;
  text-decoration: none;
  transition:  background .15s, color .15s;
  white-space: nowrap;
}

.btn-logout:hover {
  background: rgba(239,68,68,.15);
  color:      #f87171;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  height:      var(--topbar-height);
  background:  var(--topbar-bg);
  border-bottom: 1px solid #e2e8f0;
  padding:     0 24px;
  position:    sticky;
  top:         0;
  z-index:     100;
  box-shadow:  0 1px 3px rgba(0,0,0,.06);
}

/* ============================================================
   CONTENT
   ============================================================ */
.content-area {
  padding: 28px 28px 40px;
}

.page-title {
  font-size:   1.5rem;
  font-weight: 700;
  color:       #0f172a;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-card {
  border-radius: var(--card-radius);
  padding:       20px;
  display:       flex;
  align-items:   center;
  gap:           16px;
  box-shadow:    0 1px 3px rgba(0,0,0,.08);
}

.stat-card--blue   { background: linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; }
.stat-card--green  { background: linear-gradient(135deg,#22c55e,#16a34a); color:#fff; }
.stat-card--orange { background: linear-gradient(135deg,#f97316,#ea580c); color:#fff; }
.stat-card--purple { background: linear-gradient(135deg,#a855f7,#7c3aed); color:#fff; }

.stat-icon {
  font-size:    2rem;
  opacity:      .85;
}

.stat-value {
  font-size:   2rem;
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  font-size:  .8rem;
  opacity:    .85;
  margin-top: 4px;
}

/* ============================================================
   CARD
   ============================================================ */
.card {
  border:        none;
  border-radius: var(--card-radius);
  box-shadow:    0 1px 3px rgba(0,0,0,.07);
}

.card-header {
  background:    #fff;
  border-bottom: 1px solid #e2e8f0;
  font-weight:   600;
  font-size:     .9rem;
  padding:       14px 20px;
  border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
}

/* ============================================================
   QUICK ACTION BUTTONS
   ============================================================ */
.quick-action-btn {
  display:      flex;
  align-items:  center;
  gap:          14px;
  padding:      12px 14px;
  border-radius: 10px;
  background:   #f8fafc;
  border:       1px solid #e2e8f0;
  color:        #1e293b;
  text-decoration: none;
  transition:   background .15s, box-shadow .15s;
}

.quick-action-btn:hover {
  background:  #f1f5f9;
  box-shadow:  0 2px 8px rgba(0,0,0,.08);
  color:       #0f172a;
}

.qa-icon {
  width:        44px;
  height:       44px;
  border-radius: 10px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-size:    1.2rem;
  flex-shrink:  0;
}

/* ============================================================
   FORM SECTIONS
   ============================================================ */
.form-section {
  border-radius: var(--card-radius);
  background:    #fff;
  box-shadow:    0 1px 3px rgba(0,0,0,.07);
  overflow:      hidden;
}

.form-section-header {
  background:    #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding:       12px 20px;
  font-weight:   600;
  font-size:     .9rem;
  color:         #334155;
  display:       flex;
  align-items:   center;
  gap:           8px;
}

.form-section-body {
  padding: 20px;
}

/* required asterisk */
.form-label.required::after {
  content: ' *';
  color:   #ef4444;
}

/* ============================================================
   VIEW FIELDS (prontuário read-only)
   ============================================================ */
.view-field {
  background:    #f8fafc;
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  padding:       10px 14px;
  height:        100%;
}

.view-label {
  font-size:   .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color:       #64748b;
  margin-bottom: 4px;
}

.view-value {
  font-size:   .9rem;
  color:       #1e293b;
  word-break:  break-word;
  white-space: pre-wrap;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-body {
  background: linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#0f172a 100%);
  display:    flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding:    20px;
}

.login-wrapper {
  width:     100%;
  max-width: 440px;
}

.login-card {
  background:    #fff;
  border-radius: 20px;
  overflow:      hidden;
}

.login-header {
  background: linear-gradient(135deg,#1e3a5f,#3b82f6);
  padding:    40px 36px 30px;
  color:      #fff;
}

.login-icon {
  font-size:    3rem;
  margin-bottom: 12px;
  opacity:      .95;
}

.login-title {
  font-size:   1.8rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.login-subtitle {
  font-size:  .9rem;
  opacity:    .8;
  margin-bottom: 0;
}

.login-body-content {
  padding: 32px 36px;
}

.login-footer {
  padding:    16px 36px 24px;
  border-top: 1px solid #f1f5f9;
}

/* ============================================================
   TABLE
   ============================================================ */
.table th {
  font-size:  .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color:      #475569;
}

/* ============================================================
   RESPONSIVE SIDEBAR COLLAPSE
   ============================================================ */
@media (max-width: 768px) {
  #sidebar {
    width:    0;
    position: fixed;
    z-index:  200;
    height:   100vh;
  }

  #sidebar.open {
    width: var(--sidebar-width);
  }

  #page-content {
    width: 100%;
  }
}