@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');

/* ════ CSS VARIABLES ════ */
:root {
  --blue: #1A5276;
  --blue-m: #2E86C1;
  --blue-l: #D6EAF8;
  --blue-p: #EBF5FB;
  --red: #C0392B;
  --red-l: #FADBD8;
  --green: #1D9E75;
  --green-l: #D5F5E3;
  --amber: #E67E22;
  --amber-l: #FDEBD0;
  --purple: #6C3483;
  --purple-l: #E8DAEF;
  --gray: #F4F6F8;
  --gray2: #ECF0F1;
  --gray3: #BDC3C7;
  --text: #1C2833;
  --text2: #566573;
  --text3: #909CA7;
  --white: #fff;
  --border: #E5E8EA;
  --sw: 240px;
  --th: 56px;
  --f: 'DM Sans', sans-serif;
  --m: 'DM Mono', monospace;
  --r: 8px;
  --rl: 12px;
}

/* ════ RESET ════ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--f);
  font-size: 14px;
  color: var(--text);
  background: #EEF1F5;
  overflow: hidden;
  height: 100vh;
}

/* ════ LAYOUT ════ */
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ════ SIDEBAR ════ */
.sidebar {
  width: var(--sw);
  min-width: var(--sw);
  background: var(--blue);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
}

.sidebar::-webkit-scrollbar {
  width: 3px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

.sb-brand {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.sb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sb-icon {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.sb-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.sb-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

.sb-user-info {
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sb-user-name {
  font-size: 12px;
  color: #fff;
  font-weight: 500;
}

.sb-user-role {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.sb-date-bar {
  padding: 6px 14px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--m);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sb-sec {
  padding: 10px 0 4px;
}

.sb-sec-lbl {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  padding: 0 14px 6px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sb-sec-lbl::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.si {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s, border-left-color 0.15s;
  user-select: none;
  line-height: 1.3;
}

.si:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.si.active {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  border-left-color: #fff;
}

.si .ic {
  font-size: 13px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.si-main {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.si-sub {
  padding-left: 38px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.48);
}

.si-sub:hover {
  color: rgba(255, 255, 255, 0.85);
}

.si-sub.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border-left-color: rgba(255, 255, 255, 0.5);
}

.sb-div {
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
  margin: 6px 12px;
}

/* ════ MODULE ACCENT COLORS ════ */
.sb-mod-in .sb-sec-lbl { color: #4ADE80; }
.sb-mod-in .si.active { border-left-color: #4ADE80; background: rgba(74, 222, 128, 0.11); color: #fff; }
.sb-mod-in .si:hover { background: rgba(74, 222, 128, 0.08); color: #fff; }

.sb-mod-out .sb-sec-lbl { color: #FB923C; }
.sb-mod-out .si.active { border-left-color: #FB923C; background: rgba(251, 146, 60, 0.11); color: #fff; }
.sb-mod-out .si:hover { background: rgba(251, 146, 60, 0.08); color: #fff; }

.sb-mod-finance .sb-sec-lbl { color: #A78BFA; }
.sb-mod-finance .si.active { border-left-color: #A78BFA; background: rgba(167, 139, 250, 0.11); color: #fff; }
.sb-mod-finance .si:hover { background: rgba(167, 139, 250, 0.08); color: #fff; }

.sb-mod-ops .sb-sec-lbl { color: #38BDF8; }
.sb-mod-ops .si.active { border-left-color: #38BDF8; background: rgba(56, 189, 248, 0.11); color: #fff; }
.sb-mod-ops .si:hover { background: rgba(56, 189, 248, 0.08); color: #fff; }

.si-grp-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  cursor: default;
  user-select: none;
  margin-top: 2px;
}

/* ════ MAIN ════ */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ════ TOPBAR ════ */
.topbar {
  height: var(--th);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 12px;
  flex-shrink: 0;
  overflow: hidden;
}

.tb-title {
  font-size: 15px;
  font-weight: 600;
}

.tb-sub {
  font-size: 11px;
  color: var(--text3);
  margin-top: 1px;
}

.tb-tabs {
  display: flex;
  gap: 2px;
  background: #EEF1F5;
  padding: 3px;
  border-radius: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.tb-tabs::-webkit-scrollbar {
  height: 0;
}

.tt {
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text2);
  white-space: nowrap;
  transition: all 0.13s;
  border-bottom: 2px solid transparent;
}

.tt.active {
  background: var(--blue-m);
  color: #fff;
  border-bottom: 2px solid #1B4F72;
  font-weight: 600;
}

.tb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.tbadge {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 500;
  white-space: nowrap;
}

.tbg {
  background: var(--green-l);
  color: #0B5345;
}

.tbb {
  background: var(--blue-l);
  color: var(--blue);
}

.tbp {
  background: var(--purple-l);
  color: var(--purple);
}

/* ════ CONTENT ════ */
.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px;
}

.content::-webkit-scrollbar {
  width: 5px;
}

.content::-webkit-scrollbar-thumb {
  background: var(--gray3);
  border-radius: 3px;
}

/* ════ PAGES ════ */
.page {
  display: none;
}

.page.active {
  display: block;
}

.sp {
  display: none;
}

.sp.active {
  display: block;
}