/* ================================================================
   ISCRTE — includes/theme.css
   Design Tokens + Global Styles
   Theme: Deep Teal (emerald-teal gradient)
   ================================================================ */

:root {
  /* Brand Palette */
  --iscrte-900: #0d4f4f;
  --iscrte-800: #0e6464;
  --iscrte-700: #0f7a7a;
  --iscrte-600: #0d9090;
  --iscrte-500: #0ba5a5;
  --iscrte-400: #2cc0c0;
  --iscrte-300: #62d4d4;
  --iscrte-200: #a3e8e8;
  --iscrte-100: #d4f5f5;
  --iscrte-50:  #ecfcfc;

  /* Rail */
  --rail-bg:        #0a3535;
  --rail-width:     110px;
  --rail-stripe:    linear-gradient(90deg,
                      #22d3ee 0%, #06b6d4 20%,
                      #10b981 40%, #22d3ee 60%,
                      #06b6d4 80%, #10b981 100%);

  /* Accent / Gold for active */
  --accent-gold:    #f59e0b;
  --accent-gold-lt: #fef3c7;

  /* Surface */
  --surface-bg:     #f0fdfd;
  --card-bg:        #ffffff;
  --border:         #b2e0e0;

  /* Text */
  --text-primary:   #0f3d3d;
  --text-secondary: #4b7272;
  --text-muted:     #7ba8a8;

  /* Status colors */
  --status-submitted:           #6366f1;
  --status-area-reviewing:      #f59e0b;
  --status-area-reviewed:       #10b981;
  --status-research-reviewing:  #8b5cf6;
  --status-research-reviewed:   #059669;
  --status-deputy-acknowledged: #0d9488;
  --status-returned:            #ef4444;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,.1);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.12);

  /* Border Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;

  /* Transition */
  --trans: .2s ease;
}

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

body {
  font-family: 'Sarabun', 'Noto Sans Thai', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  background: var(--surface-bg);
  color: var(--text-primary);
  margin: 0;
}

/* ── Main layout with Rail ──────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.page-content {
  flex: 1;
  margin-left: var(--rail-width);
  padding: 24px 28px;
  min-height: 100vh;
}

/* ── Cards ──────────────────────────────────────────────── */
.card-iscrte {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.card-iscrte .card-header-iscrte {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--iscrte-50) 0%, #fff 100%);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-weight: 600;
  color: var(--iscrte-800);
}

/* ── Status badges ──────────────────────────────────────── */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-status.submitted           { background: #ede9fe; color: #5b21b6; }
.badge-status.area_reviewing      { background: #fef3c7; color: #92400e; }
.badge-status.area_reviewed       { background: #d1fae5; color: #065f46; }
.badge-status.research_reviewing  { background: #f3e8ff; color: #6d28d9; }
.badge-status.research_reviewed   { background: #a7f3d0; color: #047857; }
.badge-status.deputy_acknowledged { background: #ccfbf1; color: #0f766e; }
.badge-status.returned            { background: #fee2e2; color: #991b1b; }
.badge-status.recalled            { background: #f3f4f6; color: #4b5563; }

/* ── Buttons ────────────────────────────────────────────── */
.btn-teal {
  background: var(--iscrte-600);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 20px;
  font-size: .9rem;
  cursor: pointer;
  transition: background var(--trans);
}
.btn-teal:hover { background: var(--iscrte-700); }

/* ── Tables ─────────────────────────────────────────────── */
.table-iscrte { width: 100%; border-collapse: collapse; }
.table-iscrte th {
  background: var(--iscrte-900);
  color: #fff;
  padding: 10px 14px;
  font-size: .82rem;
  font-weight: 600;
  text-align: left;
}
.table-iscrte td {
  padding: 10px 14px;
  border-bottom: 1px solid #e8f5f5;
  vertical-align: middle;
}
.table-iscrte tr:hover td { background: var(--iscrte-50); }

/* ── Form elements ──────────────────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--iscrte-400);
  box-shadow: 0 0 0 3px rgba(11,165,165,.15);
}

/* ── Alert inline ───────────────────────────────────────── */
.alert-teal {
  background: var(--iscrte-50);
  border: 1px solid var(--iscrte-200);
  border-left: 4px solid var(--iscrte-500);
  color: var(--iscrte-900);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .9rem;
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--iscrte-300); border-radius: 3px; }

/* ── Utility ────────────────────────────────────────────── */
.text-teal   { color: var(--iscrte-600); }
.text-muted-th { color: var(--text-muted); font-size: .85rem; }
.fw-th       { font-weight: 600; }

/* Dashboard-aligned application shell */
:root {
  --iscrte-900: #1e1b4b;
  --iscrte-800: #27236a;
  --iscrte-700: #312e81;
  --iscrte-600: #4338ca;
  --iscrte-500: #4f46e5;
  --iscrte-400: #6366f1;
  --iscrte-300: #a5b4fc;
  --iscrte-200: #c7d2fe;
  --iscrte-100: #e0e7ff;
  --iscrte-50: #eef2ff;
  --dash-indigo: #312e81;
  --dash-violet: #4f46e5;
  --dash-purple: #7c3aed;
  --surface-bg: #f4f6ff;
  --border: #e4e7f5;
  --text-primary: #1e1b4b;
  --text-secondary: #5f6480;
  --text-muted: #9296ad;
  --shadow-sm: 0 5px 18px rgba(49,46,129,.07);
  --shadow-md: 0 12px 30px rgba(49,46,129,.11);
}

body.admin-theme,
body.analytics-theme {
  background:
    radial-gradient(circle at 92% 4%, rgba(99,102,241,.09), transparent 25rem),
    var(--surface-bg);
}

body.admin-theme .page-content,
body.analytics-theme .page-content {
  width: 100%;
  max-width: 1600px;
  padding: 32px 36px 56px;
}

body.analytics-theme .page-content {
  width: auto;
  max-width: none;
}

/* Keep shared role pages full-width and balanced across every role theme. */
body.app-has-topbar .page-content:is(.profile-page, .submit-page, .stats-page) {
  width: auto !important;
  max-width: none !important;
  margin-right: 0 !important;
}

body.app-has-topbar .page-content.stats-page {
  margin-left: var(--rail-width, 110px) !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 94px 28px 40px !important;
}

body.app-has-topbar .page-content.profile-page {
  margin-left: var(--rail-width, 110px) !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 94px 28px 40px !important;
}

body.admin-theme :is(.page-title, .text-primary-th),
body.analytics-theme .page-title {
  color: var(--text-primary) !important;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.025em;
}

body.admin-theme :is(.page-title, .text-primary-th) > i,
body.analytics-theme .page-title > i { color: var(--dash-violet) !important; }

body.admin-theme :is(.admin-card,.set-card,.info-card,.year-card,.dept-card,.filter-bar,.card),
body.analytics-theme :is(.stat-card,.chart-card,.filter-bar) {
  border: 1px solid rgba(79,70,229,.10) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-sm) !important;
}

body.admin-theme :is(.admin-card,.set-card,.info-card,.year-card,.dept-card,.filter-bar),
body.analytics-theme :is(.chart-card,.filter-bar) { background: rgba(255,255,255,.97) !important; }

body.admin-theme :is(.admin-card,.set-card,.info-card,.year-card,.dept-card),
body.analytics-theme :is(.stat-card,.chart-card) {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.admin-theme :is(.admin-card,.set-card,.info-card,.year-card,.dept-card):hover,
body.analytics-theme :is(.stat-card,.chart-card):hover {
  border-color: rgba(79,70,229,.20) !important;
  box-shadow: var(--shadow-md) !important;
}

body.admin-theme :is(.btn-teal,.btn-primary,.btn-success),
body.analytics-theme .btn-primary {
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg,var(--dash-indigo),var(--dash-violet)) !important;
  box-shadow: 0 6px 16px rgba(79,70,229,.22);
  color: #fff !important;
}

body.admin-theme :is(.form-control,.form-select),
body.analytics-theme :is(.form-control,.form-select) {
  min-height: 42px;
  border-color: rgba(79,70,229,.16);
  border-radius: 10px;
  background-color: #fbfcff;
}

body.admin-theme :is(.form-control,.form-select):focus,
body.analytics-theme :is(.form-control,.form-select):focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.13);
}

body.admin-theme :is(.user-table,.table-iscrte) th,
body.admin-theme .card table thead th {
  background: linear-gradient(135deg,#25215f,#3730a3) !important;
  color: #fff !important;
  border: 0;
}

body.admin-theme .user-table td { border-bottom-color: #eef0f8; }
body.admin-theme .user-table tr:hover td { background: #f7f7ff; }
body.admin-theme code { color: #4f46e5; }
body.admin-theme .modal-content { border: 0; border-radius: 18px !important; box-shadow: 0 24px 70px rgba(30,27,75,.22); }
body.admin-theme .modal-header { background: linear-gradient(135deg,#25215f,#4f46e5) !important; color:#fff; border-radius:18px 18px 0 0 !important; }

/* Statistics: compact, colorful dashboard cards and balanced charts. */
body.analytics-theme .row.mb-4 > div:nth-child(1) .stat-card { background:linear-gradient(135deg,#4f46e5,#7c3aed); }
body.analytics-theme .row.mb-4 > div:nth-child(2) .stat-card { background:linear-gradient(135deg,#059669,#10b981); }
body.analytics-theme .row.mb-4 > div:nth-child(3) .stat-card { background:linear-gradient(135deg,#dc2626,#f43f5e); }
body.analytics-theme .row.mb-4 > div:nth-child(4) .stat-card { background:linear-gradient(135deg,#ea580c,#f59e0b); }
body.analytics-theme .row.mb-4 > div:nth-child(5) .stat-card { background:linear-gradient(135deg,#7c3aed,#db2777); }
body.analytics-theme .stat-card { min-height: 142px; display:flex; flex-direction:column; justify-content:center; border:0 !important; }
body.analytics-theme .stat-card :is(.stat-num,.stat-lbl) { color:#fff !important; }
body.analytics-theme .stat-lbl { color:rgba(255,255,255,.76) !important; font-size:.86rem; }
body.analytics-theme .chart-card { min-height: 360px; padding: 24px; }
body.analytics-theme .chart-title { color:var(--text-primary); font-size:1rem; }
body.analytics-theme .dept-fill { background:linear-gradient(90deg,#4f46e5,#8b5cf6); border-radius:999px; }

/* Admin page-specific finishing touches. */
body.admin-theme .info-card { padding: 24px; }
body.admin-theme .page-wrap > .page-content { max-width: none; }
body.admin-theme .page-wrap > .page-content { margin-left: 0; }
body.admin-theme .set-card { padding: 26px; }
body.admin-theme .sec-title { color:var(--text-primary); border-bottom-color:#edeefe; }
body.admin-theme .kpi-mini { background:linear-gradient(145deg,#f2f0ff,#eef2ff); border-color:rgba(99,102,241,.12); }
body.admin-theme .kpi-num { color:var(--dash-violet); }
body.admin-theme .year-card.is-active { border-color:#6366f1 !important; box-shadow:0 10px 28px rgba(79,70,229,.14) !important; }
body.admin-theme .year-id-badge { color:var(--dash-indigo); }
body.admin-theme .filter-bar { padding:16px 18px; }

/* Canonical authenticated page shell, aligned to dashboard.php.
   Loaded after page-local styles through renderSidebar(), so every role keeps
   the same rail offset, page padding, and primary vertical rhythm. */
body.app-has-topbar .page-content,
body.app-has-topbar .page-wrap > .page-content {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  margin-left: var(--rail-width, 110px) !important;
  margin-right: 0 !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 94px 28px 40px !important;
}

body.app-has-topbar .page-wrap {
  padding-left: 0 !important;
}

body.app-has-topbar .page-content > :not(script):not(style),
body.app-has-topbar .page-wrap > .page-content > :not(script):not(style) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.app-has-topbar :is(.users-shell, .settings-page, .profile-page, .stats-page, .submit-page) {
  width: 100% !important;
  max-width: none !important;
}

.iscrte-dialog { border-radius:20px !important; font-family:'Sarabun',sans-serif; }
.iscrte-dialog-confirm {
  border-radius:10px !important;
  color:#fff !important;
}
.iscrte-dialog-confirm:focus,
.iscrte-dialog-confirm:hover {
  color:#fff !important;
}

@media (max-width: 768px) {
  body.admin-theme .page-content,
  body.analytics-theme .page-content { margin-left:0; padding:68px 14px 40px; }
  body.analytics-theme .chart-card { min-height:300px; padding:18px; }
}

@media (max-width: 991px) {
  body.app-has-topbar .page-content,
  body.app-has-topbar .page-wrap > .page-content {
    margin-left: 0 !important;
    padding: 86px 14px 40px !important;
    gap: 14px;
  }
}

@media print {
  body.app-has-topbar .page-content,
  body.app-has-topbar .page-wrap > .page-content {
    margin-left: 0 !important;
    padding: 0 !important;
  }
}