/* src/styles.css */
:root {
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --shadow-sm: 0 1px 2px rgba(15,42,74,.06);
  --shadow: 0 4px 16px rgba(15,42,74,.08);
  --shadow-lg: 0 12px 36px rgba(15,42,74,.12);
  --pad: 18px;
  --pad-lg: 24px;
  --row: 56px;
  --font:
    "IBM Plex Sans Arabic",
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    system-ui,
    sans-serif;
}
:root,
html[data-theme=amanx] {
  --primary-700: #cf3140;
  --primary-600: #df3a49;
  --primary-500: #f04452;
  --primary-100: #ffe1e5;
  --primary-50: #fff1f2;
  --navy-900: #2e2a29;
  --navy-800: #4d4643;
  --navy-700: #685f5b;
  --navy-100: #ece5e0;
  --navy-50: #f8f3f0;
  --green-700: #14633F;
  --green-600: #1B7A4F;
  --green-500: #22A06B;
  --green-100: #DCF1E5;
  --green-50: #EEF8F1;
  --gold-500: #C8A24B;
  --gold-50: #FBF6E8;
  --info-600: #1D6FE6;
  --info-50: #E7F0FE;
  --warn-600: #B8731B;
  --warn-50: #FCF1DD;
  --danger-600: #C8332B;
  --danger-50: #FDECEA;
  --ink-900: #1f1a19;
  --ink-700: #4d433f;
  --ink-500: #887b75;
  --ink-400: #aa9e99;
  --ink-300: #cfc3bd;
  --line: #e8ddd7;
  --line-2: #f0e8e2;
  --bg: #f6f1ed;
  --bg-2: #fcf8f5;
  --white: #fffdfb;
  --sidebar-bg: #fffaf7;
  --sidebar-text: #625752;
  --sidebar-muted: #948780;
  --sidebar-label: #aa9c96;
  --sidebar-hover-bg: rgba(240,68,82,.06);
  --sidebar-active-bg: #fff0f2;
  --sidebar-active-text: #df3a49;
  --sidebar-brand-text: #221d1c;
  --sidebar-border: #eadfd9;
  --brand-grad-from: #2e2a29;
  --brand-grad-to: #f04452;
}
html[data-theme=midnight] {
  --primary-700: #315acb;
  --primary-600: #3f68df;
  --primary-500: #557fff;
  --primary-100: #dfe8ff;
  --primary-50: #edf2ff;
  --navy-900: #091423;
  --navy-800: #10233d;
  --navy-700: #1b385e;
  --navy-100: #dde6f3;
  --navy-50: #eef4fb;
  --green-700: #1d8f5d;
  --green-600: #28a16e;
  --green-500: #38bd82;
  --green-100: #d9f5e7;
  --green-50: #eefcf4;
  --gold-500: #d7a847;
  --gold-50: #fff7e6;
  --info-600: #3f8cff;
  --info-50: #eaf2ff;
  --warn-600: #d59232;
  --warn-50: #fff4df;
  --danger-600: #d84c5b;
  --danger-50: #ffecef;
  --ink-900: #f5f8ff;
  --ink-700: #d7e2f2;
  --ink-500: #adc0da;
  --ink-400: #8aa0bc;
  --ink-300: #5e7591;
  --line: #30445e;
  --line-2: #243853;
  --bg: #07111d;
  --bg-2: #0f1c2d;
  --white: #122033;
  --sidebar-bg: #091423;
  --sidebar-text: #d7e1ef;
  --sidebar-muted: #8ea2bd;
  --sidebar-label: #6d84a4;
  --sidebar-hover-bg: rgba(85,127,255,.12);
  --sidebar-active-bg: rgba(85,127,255,.14);
  --sidebar-active-text: #ffffff;
  --sidebar-brand-text: #ffffff;
  --sidebar-border: rgba(255,255,255,.08);
  --brand-grad-from: #557fff;
  --brand-grad-to: #38bd82;
}
html[data-theme=emerald] {
  --primary-700: #0c7b5b;
  --primary-600: #12906a;
  --primary-500: #18a97a;
  --primary-100: #d8f4ea;
  --primary-50: #eefbf5;
  --navy-900: #17332c;
  --navy-800: #20453c;
  --navy-700: #2d5d52;
  --navy-100: #dfece8;
  --navy-50: #f1f8f5;
  --green-700: #127a56;
  --green-600: #1b8f65;
  --green-500: #25aa78;
  --green-100: #d7f3e7;
  --green-50: #edfaf4;
  --gold-500: #c7a347;
  --gold-50: #faf6e7;
  --info-600: #2877d4;
  --info-50: #e8f1ff;
  --warn-600: #b47d25;
  --warn-50: #fcf3df;
  --danger-600: #cc4d4d;
  --danger-50: #fdecec;
  --ink-900: #18322c;
  --ink-700: #31534a;
  --ink-500: #617c74;
  --ink-400: #8ca29b;
  --ink-300: #bfd0ca;
  --line: #dce9e4;
  --line-2: #eaf2ef;
  --bg: #f1f6f3;
  --bg-2: #f9fcfa;
  --white: #ffffff;
  --sidebar-bg: #eff7f3;
  --sidebar-text: #2e554a;
  --sidebar-muted: #6f8d84;
  --sidebar-label: #8da49c;
  --sidebar-hover-bg: rgba(24,169,122,.08);
  --sidebar-active-bg: #ddf4eb;
  --sidebar-active-text: #0c7b5b;
  --sidebar-brand-text: #17332c;
  --sidebar-border: #d8e7e1;
  --brand-grad-from: #17332c;
  --brand-grad-to: #18a97a;
}
html[data-theme=cobalt] {
  --primary-700: #214f9f;
  --primary-600: #2d63c8;
  --primary-500: #3b76e6;
  --primary-100: #dfeaff;
  --primary-50: #f0f5ff;
  --navy-900: #182234;
  --navy-800: #26354f;
  --navy-700: #344967;
  --navy-100: #dfe6f1;
  --navy-50: #f2f6fb;
  --green-700: #146b4c;
  --green-600: #1c855f;
  --green-500: #26a873;
  --green-100: #dff3e9;
  --green-50: #eefaf4;
  --gold-500: #ba8d2f;
  --gold-50: #fbf4df;
  --info-600: #2d63c8;
  --info-50: #e9f1ff;
  --warn-600: #b36c1e;
  --warn-50: #fff1df;
  --danger-600: #c43d43;
  --danger-50: #fdecee;
  --ink-900: #192236;
  --ink-700: #33415d;
  --ink-500: #65738d;
  --ink-400: #8d9ab0;
  --ink-300: #c5cedb;
  --line: #dce3ee;
  --line-2: #eaf0f7;
  --bg: #f3f6fb;
  --bg-2: #f9fbfe;
  --white: #ffffff;
  --sidebar-bg: #f5f8fd;
  --sidebar-text: #33415d;
  --sidebar-muted: #728097;
  --sidebar-label: #91a0b5;
  --sidebar-hover-bg: rgba(59,118,230,.08);
  --sidebar-active-bg: #e8f0ff;
  --sidebar-active-text: #214f9f;
  --sidebar-brand-text: #182234;
  --sidebar-border: #dce5f1;
  --brand-grad-from: #182234;
  --brand-grad-to: #3b76e6;
}
html[data-theme=ocean] {
  --primary-700: #0b7285;
  --primary-600: #0e8aa0;
  --primary-500: #12a4bd;
  --primary-100: #d7f3f7;
  --primary-50: #eefbfd;
  --navy-900: #15343b;
  --navy-800: #224b54;
  --navy-700: #31626d;
  --navy-100: #dbeaec;
  --navy-50: #eff7f8;
  --green-700: #176d55;
  --green-600: #1f876a;
  --green-500: #2aa77f;
  --green-100: #dcf2e9;
  --green-50: #effaf5;
  --gold-500: #b78e35;
  --gold-50: #fbf3df;
  --info-600: #0e77bd;
  --info-50: #e7f3ff;
  --warn-600: #b46e1f;
  --warn-50: #fff1df;
  --danger-600: #c8454c;
  --danger-50: #fdecee;
  --ink-900: #183138;
  --ink-700: #36535b;
  --ink-500: #657f87;
  --ink-400: #90a6ad;
  --ink-300: #c8d7db;
  --line: #dce9eb;
  --line-2: #eaf3f4;
  --bg: #f1f7f8;
  --bg-2: #f9fcfd;
  --white: #ffffff;
  --sidebar-bg: #eff8f9;
  --sidebar-text: #345760;
  --sidebar-muted: #708a91;
  --sidebar-label: #92a8ae;
  --sidebar-hover-bg: rgba(18,164,189,.08);
  --sidebar-active-bg: #def5f8;
  --sidebar-active-text: #0b7285;
  --sidebar-brand-text: #15343b;
  --sidebar-border: #d7e8eb;
  --brand-grad-from: #15343b;
  --brand-grad-to: #12a4bd;
}
html[data-theme=copper] {
  --primary-700: #a64220;
  --primary-600: #bf4e28;
  --primary-500: #d85d32;
  --primary-100: #f8dfd4;
  --primary-50: #fff2ed;
  --navy-900: #33231d;
  --navy-800: #4b342b;
  --navy-700: #68493d;
  --navy-100: #eadfd9;
  --navy-50: #f8f2ef;
  --green-700: #226849;
  --green-600: #2b805b;
  --green-500: #37a171;
  --green-100: #dff1e8;
  --green-50: #f0f9f4;
  --gold-500: #b9852d;
  --gold-50: #fbf0db;
  --info-600: #2c72c7;
  --info-50: #eaf2ff;
  --warn-600: #a8641a;
  --warn-50: #fff0dd;
  --danger-600: #bb352e;
  --danger-50: #fdecea;
  --ink-900: #2d211d;
  --ink-700: #574038;
  --ink-500: #80685f;
  --ink-400: #a9948c;
  --ink-300: #d2c3bd;
  --line: #e8ddd8;
  --line-2: #f0e8e4;
  --bg: #f7f1ed;
  --bg-2: #fcf8f5;
  --white: #ffffff;
  --sidebar-bg: #fbf5f1;
  --sidebar-text: #60483f;
  --sidebar-muted: #8c746b;
  --sidebar-label: #a9948c;
  --sidebar-hover-bg: rgba(216,93,50,.08);
  --sidebar-active-bg: #fff0e9;
  --sidebar-active-text: #a64220;
  --sidebar-brand-text: #33231d;
  --sidebar-border: #eadfd9;
  --brand-grad-from: #33231d;
  --brand-grad-to: #d85d32;
}
html[data-theme=rose] {
  --primary-700: #a82f58;
  --primary-600: #c23a67;
  --primary-500: #dd4a78;
  --primary-100: #f9dce7;
  --primary-50: #fff0f5;
  --navy-900: #331f2a;
  --navy-800: #4a3040;
  --navy-700: #654257;
  --navy-100: #eadde5;
  --navy-50: #f8f1f5;
  --green-700: #1d7050;
  --green-600: #278965;
  --green-500: #31a878;
  --green-100: #ddf2e9;
  --green-50: #eefaf4;
  --gold-500: #b99239;
  --gold-50: #fbf3df;
  --info-600: #2e73cc;
  --info-50: #eaf2ff;
  --warn-600: #b26d1e;
  --warn-50: #fff1df;
  --danger-600: #c43b45;
  --danger-50: #fdecee;
  --ink-900: #2d1d26;
  --ink-700: #553647;
  --ink-500: #806073;
  --ink-400: #aa8fa0;
  --ink-300: #d4c2cc;
  --line: #e9dce4;
  --line-2: #f2e8ee;
  --bg: #f8f1f5;
  --bg-2: #fdf8fb;
  --white: #ffffff;
  --sidebar-bg: #fcf4f8;
  --sidebar-text: #5d3f50;
  --sidebar-muted: #8e7182;
  --sidebar-label: #aa8fa0;
  --sidebar-hover-bg: rgba(221,74,120,.08);
  --sidebar-active-bg: #ffe8f0;
  --sidebar-active-text: #a82f58;
  --sidebar-brand-text: #331f2a;
  --sidebar-border: #eadde5;
  --brand-grad-from: #331f2a;
  --brand-grad-to: #dd4a78;
}
html[data-theme=graphite] {
  --primary-700: #7b8798;
  --primary-600: #9aa6b8;
  --primary-500: #c0cad8;
  --primary-100: #dbe2ea;
  --primary-50: #edf1f5;
  --navy-900: #0e1116;
  --navy-800: #171c23;
  --navy-700: #232a34;
  --navy-100: #d8dee6;
  --navy-50: #eef1f5;
  --green-700: #4aa47a;
  --green-600: #63bd92;
  --green-500: #7ad1a6;
  --green-100: #d8f4e6;
  --green-50: #ecfbf3;
  --gold-500: #d0aa62;
  --gold-50: #fff5df;
  --info-600: #8eb5ff;
  --info-50: #e8f1ff;
  --warn-600: #d3a150;
  --warn-50: #fff2dd;
  --danger-600: #e16d75;
  --danger-50: #ffecee;
  --ink-900: #f5f7fb;
  --ink-700: #d8dee8;
  --ink-500: #adb7c5;
  --ink-400: #858f9d;
  --ink-300: #5d6876;
  --line: #323b47;
  --line-2: #28313c;
  --bg: #0b0e13;
  --bg-2: #141920;
  --white: #1b222b;
  --sidebar-bg: #0e1116;
  --sidebar-text: #d7dde6;
  --sidebar-muted: #939dac;
  --sidebar-label: #727d8d;
  --sidebar-hover-bg: rgba(192,202,216,.1);
  --sidebar-active-bg: rgba(192,202,216,.14);
  --sidebar-active-text: #ffffff;
  --sidebar-brand-text: #ffffff;
  --sidebar-border: rgba(255,255,255,.08);
  --brand-grad-from: #c0cad8;
  --brand-grad-to: #7ad1a6;
}
html[data-theme=forest] {
  --primary-700: #2c6d3f;
  --primary-600: #357f4c;
  --primary-500: #439a5d;
  --primary-100: #def0e3;
  --primary-50: #f0f8f2;
  --navy-900: #1f2e24;
  --navy-800: #304436;
  --navy-700: #445b4a;
  --navy-100: #e0e9e2;
  --navy-50: #f2f7f3;
  --green-700: #2c6d3f;
  --green-600: #357f4c;
  --green-500: #439a5d;
  --green-100: #def0e3;
  --green-50: #f0f8f2;
  --gold-500: #b59a3d;
  --gold-50: #fbf5df;
  --info-600: #2d75c9;
  --info-50: #eaf2ff;
  --warn-600: #a66e23;
  --warn-50: #fff1df;
  --danger-600: #bc4643;
  --danger-50: #fdecec;
  --ink-900: #1f2e24;
  --ink-700: #405944;
  --ink-500: #6f846f;
  --ink-400: #99aa9a;
  --ink-300: #cbd8cc;
  --line: #dfe9e1;
  --line-2: #ecf2ed;
  --bg: #f3f7f3;
  --bg-2: #fafdfa;
  --white: #ffffff;
  --sidebar-bg: #f0f7f1;
  --sidebar-text: #405944;
  --sidebar-muted: #718671;
  --sidebar-label: #99aa9a;
  --sidebar-hover-bg: rgba(67,154,93,.08);
  --sidebar-active-bg: #e2f1e5;
  --sidebar-active-text: #2c6d3f;
  --sidebar-brand-text: #1f2e24;
  --sidebar-border: #dbe7dd;
  --brand-grad-from: #1f2e24;
  --brand-grad-to: #439a5d;
}
html[data-theme=amber] {
  --primary-700: #a86d0a;
  --primary-600: #c07d0d;
  --primary-500: #dc9214;
  --primary-100: #fae7c2;
  --primary-50: #fff7e8;
  --navy-900: #2f2819;
  --navy-800: #493c25;
  --navy-700: #625236;
  --navy-100: #e8e1d3;
  --navy-50: #f7f4ed;
  --green-700: #236c50;
  --green-600: #2d8563;
  --green-500: #38a577;
  --green-100: #def2e9;
  --green-50: #f0faf4;
  --gold-500: #dc9214;
  --gold-50: #fff5df;
  --info-600: #2d72c8;
  --info-50: #eaf2ff;
  --warn-600: #a86d0a;
  --warn-50: #fff4df;
  --danger-600: #bd3f38;
  --danger-50: #fdecea;
  --ink-900: #2f2819;
  --ink-700: #584d36;
  --ink-500: #82745a;
  --ink-400: #aa9e88;
  --ink-300: #d3c9b5;
  --line: #e8e0d0;
  --line-2: #f1eadf;
  --bg: #f7f4ed;
  --bg-2: #fcfaf5;
  --white: #ffffff;
  --sidebar-bg: #fbf7ef;
  --sidebar-text: #5f5238;
  --sidebar-muted: #8d7e66;
  --sidebar-label: #aa9e88;
  --sidebar-hover-bg: rgba(220,146,20,.09);
  --sidebar-active-bg: #fff0d1;
  --sidebar-active-text: #a86d0a;
  --sidebar-brand-text: #2f2819;
  --sidebar-border: #e8e0d0;
  --brand-grad-from: #2f2819;
  --brand-grad-to: #dc9214;
}
html[data-theme=slate] {
  --primary-700: #1d4ed8;
  --primary-600: #2563eb;
  --primary-500: #3b82f6;
  --primary-100: #dbeafe;
  --primary-50: #eff6ff;
  --navy-900: #0f172a;
  --navy-800: #1e293b;
  --navy-700: #334155;
  --navy-100: #e2e8f0;
  --navy-50: #f1f5f9;
  --green-700: #15803d;
  --green-600: #16a34a;
  --green-500: #22c55e;
  --green-100: #dcfce7;
  --green-50: #f0fdf4;
  --gold-500: #ca8a04;
  --gold-50: #fefce8;
  --info-600: #2563eb;
  --info-50: #eff6ff;
  --warn-600: #d97706;
  --warn-50: #fffbeb;
  --danger-600: #dc2626;
  --danger-50: #fef2f2;
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --line: #e2e8f0;
  --line-2: #f1f5f9;
  --bg: #f8fafc;
  --bg-2: #ffffff;
  --white: #ffffff;
  --sidebar-bg: #0f172a;
  --sidebar-text: #e2e8f0;
  --sidebar-muted: #94a3b8;
  --sidebar-label: #64748b;
  --sidebar-hover-bg: rgba(59,130,246,.12);
  --sidebar-active-bg: rgba(59,130,246,.18);
  --sidebar-active-text: #ffffff;
  --sidebar-brand-text: #ffffff;
  --sidebar-border: rgba(255,255,255,.08);
  --brand-grad-from: #3b82f6;
  --brand-grad-to: #22c55e;
}
[data-density=compact] {
  --pad: 12px;
  --pad-lg: 16px;
  --row: 44px;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink-900);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[dir=rtl] {
  font-feature-settings: "liga" 1;
}
button,
input,
select,
textarea {
  font-family: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
.app {
  display: flex;
  min-height: 100vh;
}
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sidebar {
  width: 264px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 22px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid var(--sidebar-border);
}
.sidebar__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 8px 22px 8px;
}
.sidebar__logo-img {
  height: 32px;
  width: auto;
}
.sidebar__brand-sub {
  font-size: 11px;
  margin: 0;
  color: var(--sidebar-muted);
}
.nav-group {
  margin-top: 14px;
}
.nav-group__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-label);
  padding: 0 10px 8px;
  font-weight: 600;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--sidebar-text);
  cursor: pointer;
  margin-bottom: 2px;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.nav-item:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-active-text);
}
.nav-item.is-active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  position: relative;
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--primary-500);
  border-radius: 0 3px 3px 0;
}
.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: .9;
}
.sidebar__user {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #2E4A78,
      #1E3358);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.sidebar__user-name {
  color: var(--sidebar-brand-text);
  font-size: 13px;
  font-weight: 500;
}
.sidebar__user-role {
  color: var(--sidebar-muted);
  font-size: 11px;
}
.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar__title {
  flex: 1;
}
.topbar__title h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.topbar__title p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ink-500);
}
.search {
  flex: 0 1 320px;
  position: relative;
}
.search input {
  width: 100%;
  padding: 9px 14px 9px 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  font-size: 13px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.search input:focus {
  border-color: #475569;
  background: white;
  box-shadow: 0 0 0 3px rgba(71, 85, 105, .12);
}
.search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-400);
  pointer-events: none;
}
.lang-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: white;
  font-size: 12.5px;
  font-weight: 500;
}
.lang-toggle button {
  border: none;
  background: transparent;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--ink-500);
}
.lang-toggle button.is-active {
  background: var(--primary-500);
  color: white;
}
.theme-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink-500);
}
.theme-select select {
  border: none;
  background: transparent;
  color: var(--ink-700);
  font-size: 12.5px;
  font-weight: 500;
  outline: none;
}
html[data-theme=midnight] .btn--secondary,
html[data-theme=graphite] .btn--secondary {
  background: #c8d7ea;
  color: #16314f;
  border-color: #a7bdd8;
}
html[data-theme=midnight] .btn--secondary:hover,
html[data-theme=graphite] .btn--secondary:hover {
  background: #d7e3f2;
  border-color: #90adcf;
}
html[data-theme=midnight] .stat,
html[data-theme=graphite] .stat {
  background: #d7e2f0;
  border-color: #aec2da;
}
html[data-theme=midnight] .stat__label,
html[data-theme=graphite] .stat__label {
  color: #3c5674;
}
html[data-theme=midnight] .stat__value,
html[data-theme=graphite] .stat__value {
  color: #102743;
}
html[data-theme=midnight] .visits-page__footer-chip,
html[data-theme=graphite] .visits-page__footer-chip {
  background: #d7e3f0;
  color: #102743;
  border: 1px solid #aec2da;
}
html[data-theme=midnight] .visits-page__footer-chip .tiny,
html[data-theme=graphite] .visits-page__footer-chip .tiny {
  color: #46617e;
}
html[data-theme=midnight] .field input,
html[data-theme=graphite] .field input,
html[data-theme=midnight] .field select,
html[data-theme=graphite] .field select,
html[data-theme=midnight] .field textarea,
html[data-theme=graphite] .field textarea,
html[data-theme=midnight] .search input,
html[data-theme=graphite] .search input,
html[data-theme=midnight] .theme-select select,
html[data-theme=graphite] .theme-select select {
  background: #dbe6f2;
  color: #102743;
  border-color: #aec2da;
}
html[data-theme=midnight] .field input::placeholder,
html[data-theme=graphite] .field input::placeholder,
html[data-theme=midnight] .field textarea::placeholder,
html[data-theme=graphite] .field textarea::placeholder,
html[data-theme=midnight] .search input::placeholder,
html[data-theme=graphite] .search input::placeholder {
  color: #58708d;
}
html[data-theme=midnight] .field input:focus,
html[data-theme=graphite] .field input:focus,
html[data-theme=midnight] .field select:focus,
html[data-theme=graphite] .field select:focus,
html[data-theme=midnight] .field textarea:focus,
html[data-theme=graphite] .field textarea:focus,
html[data-theme=midnight] .search input:focus,
html[data-theme=graphite] .search input:focus {
  border-color: #557fff;
  box-shadow: 0 0 0 3px rgba(85, 127, 255, .18);
}
html[data-theme=midnight] .inbox-row.is-selected,
html[data-theme=graphite] .inbox-row.is-selected {
  background: #d8e4f1;
  border-left-color: #557fff;
}
html[data-theme=midnight] .inbox-row.is-selected .tiny,
html[data-theme=graphite] .inbox-row.is-selected .tiny,
html[data-theme=midnight] .inbox-row.is-selected .muted,
html[data-theme=graphite] .inbox-row.is-selected .muted {
  color: #486380;
}
html[data-theme=midnight] .inbox-row.is-selected div,
html[data-theme=graphite] .inbox-row.is-selected div,
html[data-theme=midnight] .inbox-row.is-selected strong,
html[data-theme=graphite] .inbox-row.is-selected strong,
html[data-theme=midnight] .inbox-row.is-selected span,
html[data-theme=graphite] .inbox-row.is-selected span {
  color: #102743;
}
html[data-theme=midnight] .badge,
html[data-theme=graphite] .badge {
  background: rgba(255, 255, 255, .08);
  color: #c0cde0;
}
html[data-theme=midnight] .badge--success,
html[data-theme=graphite] .badge--success {
  background: rgba(56, 189, 130, .14);
  color: #5cd6a0;
}
html[data-theme=midnight] .badge--warn,
html[data-theme=graphite] .badge--warn {
  background: rgba(213, 146, 50, .14);
  color: #e8b862;
}
html[data-theme=midnight] .badge--info,
html[data-theme=graphite] .badge--info {
  background: rgba(63, 140, 255, .14);
  color: #6eaaff;
}
html[data-theme=midnight] .badge--danger,
html[data-theme=graphite] .badge--danger {
  background: rgba(216, 76, 91, .14);
  color: #f08090;
}
html[data-theme=midnight] .badge--neutral,
html[data-theme=graphite] .badge--neutral {
  background: rgba(255, 255, 255, .08);
  color: #a8b8cc;
}
html[data-theme=midnight] .badge--gold,
html[data-theme=graphite] .badge--gold {
  background: rgba(215, 168, 71, .14);
  color: #e8be5c;
}
.iconbtn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  display: grid;
  place-items: center;
  color: var(--ink-500);
  cursor: pointer;
  position: relative;
  transition: all .12s;
}
.iconbtn:hover {
  border-color: var(--ink-300);
  color: var(--ink-700);
}
.iconbtn svg {
  width: 18px;
  height: 18px;
}
.iconbtn__dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-500);
  border: 2px solid white;
}
.content {
  padding: 28px;
  flex: 1;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad-lg);
  box-shadow: var(--shadow-sm);
}
.card--flush {
  padding: 0;
  overflow: hidden;
}
.card__header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 12px;
}
.card__header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.card__header p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink-500);
}
.card__body {
  padding: 20px;
}
.card__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--line-2);
  background: var(--bg-2);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--navy-900);
  color: white;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.btn:hover {
  background: var(--navy-700);
}
.btn svg {
  width: 16px;
  height: 16px;
}
.btn--primary {
  background: var(--primary-600);
}
.btn--primary:hover {
  background: var(--primary-700);
}
.btn--secondary {
  background: white;
  color: var(--ink-700);
  border-color: var(--line);
}
.btn--secondary:hover {
  background: var(--bg);
  border-color: var(--ink-300);
}
.btn--ghost {
  background: transparent;
  color: var(--ink-700);
}
.btn--ghost:hover {
  background: var(--navy-50);
}
.btn--danger {
  background: white;
  color: var(--danger-600);
  border-color: var(--line);
}
.btn--danger:hover {
  background: var(--danger-50);
  border-color: var(--danger-600);
}
.btn--lg {
  padding: 13px 22px;
  font-size: 14.5px;
  border-radius: 12px;
}
.btn--xl {
  padding: 18px 28px;
  font-size: 16px;
  border-radius: 14px;
}
.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--navy-50);
  color: var(--navy-800);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge--success {
  background: var(--green-100);
  color: var(--green-700);
}
.badge--warn {
  background: var(--warn-50);
  color: var(--warn-600);
}
.badge--info {
  background: var(--info-50);
  color: var(--info-600);
}
.badge--danger {
  background: var(--danger-50);
  color: var(--danger-600);
}
.badge--neutral {
  background: var(--navy-50);
  color: var(--ink-700);
}
.badge--gold {
  background: var(--gold-50);
  color: var(--gold-500);
}
.badge--no-dot::before {
  display: none;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-700);
}
.field label .req {
  color: var(--danger-600);
}
.field input,
.field select,
.field textarea {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  font-size: 13.5px;
  outline: none;
  color: var(--ink-900);
  transition: border-color .12s, box-shadow .12s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #475569;
  box-shadow: 0 0 0 3px rgba(71, 85, 105, .12);
}
.field input:disabled,
.field select:disabled {
  background: var(--bg-2);
  color: var(--ink-500);
}
.field__hint {
  font-size: 11.5px;
  color: var(--ink-500);
}
.field__hint--ok {
  color: var(--green-600);
}
.field__hint--err {
  color: var(--danger-600);
}
.field__error {
  font-size: 11.5px;
  color: var(--danger-600);
  margin-top: -2px;
}
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
  border-color: var(--danger-600) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}
.form-control.is-invalid {
  border-color: var(--danger-600) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.stat {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.stat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stat__label {
  font-size: 12.5px;
  color: var(--ink-500);
  font-weight: 500;
}
.stat__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--primary-50);
  color: var(--primary-600);
}
.stat__icon svg {
  width: 16px;
  height: 16px;
}
.stat__icon--navy {
  background: var(--navy-50);
  color: var(--navy-800);
}
.stat__icon--gold {
  background: var(--gold-50);
  color: var(--gold-500);
}
.stat__icon--warn {
  background: var(--warn-50);
  color: var(--warn-600);
}
.stat__icon--danger {
  background: #fef2f2;
  color: #dc2626;
}
.stat__icon--teal {
  background: #f0fdfa;
  color: #0d9488;
}
.stat__icon--green {
  background: #f0fdf4;
  color: #16a34a;
}
.stat__icon--muted {
  background: #f3f4f6;
  color: #6b7280;
}
.stat__value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.stat__delta {
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stat__delta--up {
  color: var(--green-600);
}
.stat__delta--down {
  color: var(--danger-600);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th {
  text-align: start;
  font-weight: 500;
  color: var(--ink-500);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.table td {
  text-align: start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-900);
  vertical-align: middle;
}
.table tr:last-child td {
  border-bottom: none;
}
.table tr:hover td {
  background: var(--bg-2);
}
.table .visitor-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}
.table th.num,
.table td.num {
  text-align: end;
}
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.row--between {
  justify-content: space-between;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.split-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
.split-1-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}
.gap-sm {
  gap: 8px;
}
.gap-lg {
  gap: 20px;
}
.mt-sm {
  margin-top: 8px;
}
.mt {
  margin-top: 16px;
}
.mt-lg {
  margin-top: 24px;
}
.muted {
  color: var(--ink-500);
}
.tiny {
  font-size: 11.5px;
}
.mono {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}
.av__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.av--xs {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.av--md {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.av--lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
}
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding: 0 4px;
}
.tabs__tab {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--ink-500);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-weight: 500;
  margin-bottom: -1px;
}
.tabs__tab.is-active {
  color: var(--ink-900);
  border-bottom-color: var(--primary-500);
}
.timeline {
  display: flex;
  flex-direction: column;
}
.timeline__item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding-bottom: 18px;
  position: relative;
}
.timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.timeline__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  border: 2px solid var(--line);
  color: var(--ink-400);
  z-index: 1;
}
.timeline__dot--ok {
  background: var(--green-100);
  border-color: var(--green-500);
  color: var(--green-700);
}
.timeline__dot--active {
  background: white;
  border-color: var(--navy-700);
  color: var(--navy-700);
  animation: pulse 2s infinite;
}
.timeline__dot--err {
  background: var(--danger-50);
  border-color: var(--danger-600);
  color: var(--danger-600);
}
.timeline__dot svg {
  width: 14px;
  height: 14px;
}
.timeline__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900);
}
.timeline__meta {
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 2px;
}
.timeline__detail {
  font-size: 12.5px;
  color: var(--ink-700);
  margin-top: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 10px 12px;
}
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(22, 58, 99, .4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(22, 58, 99, 0);
  }
}
.qr-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.steps {
  display: flex;
  align-items: center;
  padding: 4px 0;
}
.steps__step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.steps__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line);
  color: var(--ink-400);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.steps__step.is-done .steps__dot {
  background: var(--primary-500);
  border-color: var(--primary-500);
  color: white;
}
.steps__step.is-active .steps__dot {
  background: white;
  border-color: var(--primary-600);
  color: var(--primary-600);
  box-shadow: 0 0 0 4px var(--primary-50);
}
.steps__label {
  font-size: 12.5px;
  color: var(--ink-500);
  font-weight: 500;
}
.steps__step.is-active .steps__label {
  color: var(--ink-900);
}
.steps__step.is-done .steps__label {
  color: var(--ink-700);
}
.steps__line {
  flex: 1;
  height: 2px;
  background: var(--line);
  margin: 0 8px;
}
.inbox-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  transition: background .12s;
}
.inbox-row:hover {
  background: var(--bg-2);
}
.inbox-row.is-selected {
  background: var(--primary-50);
  border-left: 3px solid var(--primary-500);
  padding-left: 17px;
}
.phone-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      180deg,
      var(--navy-900) 0%,
      var(--navy-800) 100%);
  border-radius: var(--r-lg);
  padding: 30px;
  min-height: 640px;
}
.scanner-frame {
  width: 100%;
  aspect-ratio: 1;
  background: #0A0E1A;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.scanner-frame::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 2px solid rgba(34, 160, 107, .5);
  border-radius: 12px;
}
.scanner-corners {
  position: absolute;
  inset: 12%;
  pointer-events: none;
}
.scanner-corners > div {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 3px solid var(--green-500);
}
.scanner-corners > div:nth-child(1) {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 8px;
}
.scanner-corners > div:nth-child(2) {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: 8px;
}
.scanner-corners > div:nth-child(3) {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 8px;
}
.scanner-corners > div:nth-child(4) {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 8px;
}
.scanner-line {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--green-500),
      transparent);
  box-shadow: 0 0 12px var(--green-500);
  animation: scan 2.4s ease-in-out infinite;
}
@keyframes scan {
  0%, 100% {
    top: 14%;
  }
  50% {
    top: 84%;
  }
}
.access-card {
  background:
    linear-gradient(
      135deg,
      var(--navy-900) 0%,
      var(--navy-700) 100%);
  color: white;
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.586/1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.access-card::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background:
    radial-gradient(
      circle,
      rgba(34, 160, 107, .3),
      transparent 70%);
  right: -60px;
  bottom: -60px;
}
.access-card__chip {
  width: 32px;
  height: 24px;
  background:
    linear-gradient(
      135deg,
      #C8A24B,
      #8C7233);
  border-radius: 4px;
  position: relative;
  z-index: 1;
}
.access-card__num {
  font-family: "Courier New", monospace;
  font-size: 16px;
  letter-spacing: 0.1em;
  font-feature-settings: "tnum";
  position: relative;
  z-index: 1;
}
.bars {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 200px;
  padding: 0 4px;
}
.bars__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
}
.bars__bar {
  width: 100%;
  background:
    linear-gradient(
      180deg,
      var(--green-500),
      var(--green-700));
  border-radius: 6px 6px 0 0;
  position: relative;
  min-height: 2px;
  transition: height .25s ease-out;
}
.bars__bar--alt {
  background:
    linear-gradient(
      180deg,
      var(--navy-700),
      var(--navy-900));
  border-radius: 0 0 6px 6px;
}
.bars__lbl {
  font-size: 11px;
  color: var(--ink-500);
  flex-shrink: 0;
}
.employee-create__layout {
  align-items: start;
}
.employee-create__main,
.employee-create__aside {
  gap: 20px;
}
.employee-section__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.employee-section__header h3,
.employee-aside__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}
.employee-section__header--action {
  align-items: center;
}
.employee-section__header--media {
  align-items: flex-start;
}
.employee-section__grid {
  align-items: start;
}
.upload-inline__box {
  min-height: 114px;
  border: 2px dashed var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}
.phone-field {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0;
}
.phone-field__code {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.phone-field input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-inline-start: none;
}
.approval-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  grid-column: 1 / -1;
}
.approval-box__title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink-700);
}
.toggle input {
  display: none;
}
.toggle__track {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background .12s ease;
}
.toggle__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease;
}
.toggle input:checked + .toggle__track {
  background: var(--green-500);
}
.toggle input:checked + .toggle__track::after {
  transform: translateX(20px);
}
.upload-grid {
  gap: 18px;
}
.upload-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upload-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
}
.upload-card__drop {
  min-height: 230px;
  border: 2px dashed var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
.upload-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--navy-50);
  color: var(--navy-800);
  margin-bottom: 10px;
}
.upload-card__text {
  font-size: 15px;
  font-weight: 600;
}
.upload-card__divider {
  width: 100%;
  max-width: 210px;
  position: relative;
  text-align: center;
  margin: 14px 0;
}
.upload-card__divider::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  border-top: 1px solid var(--line);
}
.upload-card__divider span {
  position: relative;
  padding: 0 10px;
  background: var(--bg-2);
  color: var(--ink-500);
}
.list-card,
.education-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  padding: 16px 18px;
}
.list-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
}
.education-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.employee-create__footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}
.employee-summary__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.employee-summary__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 12px;
}
.employee-summary__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.employee-photo-card {
  gap: 14px;
}
.employee-photo-card--inline {
  width: min(100%, 360px);
  margin-inline-start: auto;
  display: flex;
  flex-direction: column;
}
.employee-photo-card__drop {
  min-height: 320px;
  border: 2px dashed var(--line);
  border-radius: 16px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  text-align: center;
  transition: all .12s ease;
}
.employee-photo-card__drop--inline {
  min-height: auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px;
  text-align: start;
}
.employee-photo-card__drop.is-dragging {
  border-color: var(--green-500);
  background: var(--green-50);
}
.employee-photo-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--navy-50);
  color: var(--navy-800);
}
.employee-photo-card__icon--circle {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  flex-shrink: 0;
}
.employee-photo-card__headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
}
.employee-photo-card__preview {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.employee-photo-card__preview--circle {
  width: 86px;
  height: 86px;
  max-height: none;
  border-radius: 50%;
  flex-shrink: 0;
}
.employee-photo-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.employee-step-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.employee-step-list__item {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  text-align: start;
  cursor: pointer;
  transition: all .12s ease;
}
.employee-step-list__item:hover {
  border-color: var(--ink-300);
  background: white;
}
.employee-step-list__item.is-active {
  border-color: var(--green-500);
  background: var(--green-50);
  box-shadow: 0 0 0 3px rgba(34, 160, 107, .08);
}
.employee-step-list__item.is-done {
  border-color: var(--green-100);
}
.employee-step-list__index {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: white;
  border: 1px solid var(--line);
  color: var(--ink-700);
  font-weight: 600;
}
.employee-step-list__item.is-active .employee-step-list__index,
.employee-step-list__item.is-done .employee-step-list__index {
  background: var(--green-500);
  border-color: var(--green-500);
  color: white;
}
.employee-step-list__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.employee-step-list__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900);
}
.employee-step-list__meta {
  font-size: 11.5px;
  color: var(--ink-500);
  line-height: 1.45;
}
@media (max-width: 1100px) {
  .employee-create__layout,
  .education-card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 800px) {
  .field-grid,
  .grid-2,
  .phone-field {
    grid-template-columns: 1fr;
  }
  .employee-create__footer,
  .approval-box,
  .upload-inline__box,
  .employee-summary__item,
  .employee-section__header,
  .employee-section__header--action {
    flex-direction: column;
    align-items: stretch;
  }
  .employee-photo-card--inline {
    width: 100%;
  }
  .employee-photo-card__drop--inline {
    flex-direction: column;
    text-align: center;
  }
  .employee-photo-card__info {
    align-items: center;
  }
  .phone-field input {
    border-inline-start: 1px solid var(--line);
    border-start-start-radius: 10px;
    border-end-start-radius: 10px;
  }
  .phone-field__code {
    border-start-end-radius: 10px;
    border-end-end-radius: 10px;
  }
}
.create-visit-steps {
  margin-bottom: 20px;
}
.create-visit__title {
  margin: 0 0 4px;
  font-size: 16px;
}
.create-visit__subtitle {
  margin: 0 0 18px;
}
.create-visit__footer {
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.create-visit__visitor-head {
  margin-bottom: 18px;
}
.create-visit__visitor-actions {
  position: relative;
}
.create-visit__visitor-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 230px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
  z-index: 5;
}
.create-visit__visitor-menu button {
  width: 100%;
  border: none;
  background: transparent;
  text-align: start;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink-700);
  cursor: pointer;
}
.create-visit__visitor-menu button:hover {
  background: var(--bg-2);
}
.create-visit__visitor-card,
.create-visit__existing-item,
.create-visit__validation-card {
  padding: 16px;
}
.create-visit__visitor-card {
  background: var(--bg-2);
}
.create-visit__visitor-main {
  gap: 12px;
}
.create-visit__visitor-name {
  font-weight: 600;
  font-size: 14px;
}
.create-visit__metric {
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.create-visit__metric-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
}
.create-visit__metric-note {
  line-height: 1.45;
}
.create-visit__visitor-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.create-visit__panel-title {
  margin: 0 0 14px;
  font-size: 13px;
}
.create-visit__validation-note {
  margin-top: 10px;
  padding: 10px;
  background: var(--green-50);
  border-radius: 8px;
  font-size: 12px;
  color: var(--green-700);
}
.create-visit__validation-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-900);
}
.create-visit__review-grid {
  gap: 14px;
}
.create-visit__review-item {
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-2);
}
.create-visit__review-label {
  margin-bottom: 4px;
}
.create-visit__review-value {
  font-size: 13.5px;
  font-weight: 500;
}
.create-visit__sidebar {
  gap: 16px;
}
.create-visit__sidebar-head,
.create-visit__tip-row {
  gap: 10px;
}
.create-visit__sidebar-head {
  margin-bottom: 10px;
}
.create-visit__sidebar-icon {
  width: 36px;
  height: 36px;
}
.create-visit__sidebar-title {
  font-weight: 600;
  font-size: 14px;
}
.create-visit__timeline {
  margin-top: 10px;
}
.create-visit__tip {
  background: var(--green-50);
  border-color: var(--green-100);
}
.create-visit__tip-text {
  font-size: 13.5px;
  color: var(--green-700);
  line-height: 1.5;
}
@media (max-width:900px) {
  .create-visit__visitor-head {
    flex-direction: column;
    align-items: stretch;
  }
  .create-visit__visitor-menu {
    inset-inline-start: 0;
    inset-inline-end: auto;
  }
}
.sidebar-backdrop {
  display: none;
}
.sidebar__close {
  display: none;
}
.topbar__burger {
  display: none;
}
@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 100vh;
    width: 280px;
    max-width: 86vw;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 12px 36px rgba(15, 42, 74, .18);
  }
  html[dir=rtl] .sidebar {
    transform: translateX(100%);
  }
  .sidebar.is-open,
  html[dir=rtl] .sidebar.is-open {
    transform: translateX(0);
  }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 42, 74, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 55;
  }
  .sidebar-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .sidebar__close {
    display: grid;
    position: absolute;
    top: 14px;
    inset-inline-end: 12px;
  }
  .sidebar__brand {
    padding-inline-end: 44px;
  }
  .topbar__burger {
    display: grid !important;
  }
  .topbar {
    padding: 10px 16px;
    gap: 10px;
  }
  .content {
    padding: 18px;
  }
  .topbar__title h2 {
    font-size: 16px;
  }
  .topbar__title p {
    display: none;
  }
  .topbar__search {
    flex: 0 1 220px;
  }
  .sidebar {
    width: 280px;
  }
}
@media (max-width: 720px) {
  .topbar {
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .topbar__title {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
  }
  .topbar__title h2 {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar__search {
    display: none;
  }
  .topbar__theme {
    display: none;
  }
  .topbar__cta {
    padding: 8px 10px;
  }
  .topbar__cta-label {
    display: none;
  }
  .lang-toggle {
    font-size: 11.5px;
  }
  .lang-toggle button {
    padding: 6px 10px;
  }
  .content {
    padding: 12px;
  }
  .card {
    padding: 14px;
    border-radius: 12px;
  }
  .field-grid,
  .grid-2,
  .grid-3,
  .form-grid,
  .two-col,
  .row-2,
  .stack-2,
  .split-2-1,
  .split-1-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .create-visit__sidebar {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px !important;
  }
  .create-visit__sidebar > .card {
    flex: 1;
    min-width: 0;
  }
  .create-visit__timeline .timeline__item {
    padding-block: 6px;
  }
  .create-visit__tip-text {
    font-size: 12px;
  }
  .steps__label {
    display: none;
  }
  .steps__step {
    flex: none;
  }
  .steps__step.is-active .steps__label {
    display: block;
    font-size: 12px;
  }
  .create-visit__footer {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
  }
  .stats-grid,
  .dashboard-stats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }
  .page-header,
  .card-header,
  .section-header,
  .toolbar,
  .filter-bar,
  .visits-page__filters {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .page-header__actions,
  .toolbar__actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .btn {
    font-size: 13px;
    padding: 9px 14px;
  }
  .table-wrap,
  .responsive-table,
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  *:has(> .table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table {
    min-width: 640px;
  }
  .modal,
  .modal-card,
  .dialog {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    margin: 0 !important;
  }
  .modal-overlay,
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .tabs,
  .tab-list,
  .tabs-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
  .tabs::-webkit-scrollbar,
  .tab-list::-webkit-scrollbar {
    display: none;
  }
  .field--toggle .toggle-row {
    width: 100%;
  }
  .field input[type=time] {
    max-width: 100%;
  }
  .settings-category__grid--compact {
    grid-template-columns: 1fr 1fr !important;
  }
  .login-card {
    width: 100% !important;
    padding: 20px !important;
    border-radius: 14px !important;
  }
  .login-page {
    padding: 14px !important;
  }
  .sidebar__user {
    padding: 10px;
  }
  .avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  h1 {
    font-size: 20px;
  }
  h2 {
    font-size: 17px;
  }
  h3 {
    font-size: 15px;
  }
}
@media (max-width: 420px) {
  .topbar__theme {
    display: none;
  }
  .lang-toggle {
    display: none;
  }
  .topbar {
    gap: 6px;
  }
  .content {
    padding: 10px;
  }
  .create-visit__sidebar {
    flex-direction: column !important;
  }
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */