adminator-admin-dashboard 2.8.1 → 4.1.5

package/src/assets/styles/2026/_responsive.scss

@@ -0,0 +1,229 @@
+/* ============ RESPONSIVE ============ */
+
+/* Auth pages: collapse the marketing aside when the split-screen no longer fits.
+   (Lives here, not in _auth.scss, so it wins over the later default rules there.) */
+@media (max-width: 900px) {
+  .auth-shell { grid-template-columns: 1fr; }
+  .auth-aside { display: none; }
+}
+
+@media (max-width: 1200px) {
+  /* Dashboard */
+  .sv-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
+  .sv-radials { grid-template-columns: 1fr; gap: 18px; }
+  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+
+  /* Email */
+  .mail-shell { grid-template-columns: 200px 1fr; height: auto; min-height: 0; }
+  .mail-reader { display: none; }
+
+  /* Calendar */
+  .cal-shell { grid-template-columns: 240px 1fr; }
+  .cal-grid { grid-auto-rows: minmax(96px, 1fr); }
+}
+
+@media (max-width: 1100px) {
+  .shell { grid-template-columns: 72px 1fr; }
+  .d-sidebar {
+    padding: 20px 10px;
+    overflow-y: auto;   /* allow scroll on short viewports (e.g. 750×590) */
+    overflow-x: hidden;
+    z-index: 20;
+  }
+  .brand-text, .brand-tag, .nav-label, .nav-link > span:not(.nav-badge), .nav-link .nav-badge,
+  .workspace-text, .workspace-chev, .nav-link .chev { display: none; }
+  .brand { justify-content: center; padding: 0 0 18px; }
+  .nav-link { justify-content: center; padding: 10px; }
+  .nav-link.is-active::before { left: -10px; }
+  .workspace { justify-content: center; padding: 6px; }
+  .col-6 { grid-column: span 12; }
+
+  /* Rail-mode flyout submenu: positioned via JS as position:fixed so the
+     sidebar can scroll (overflow-y: auto above) without clipping the flyout,
+     and so it can be shifted up to fit when opened near the viewport bottom. */
+  .nav-submenu {
+    position: fixed;
+    left: 82px;          /* fallback; JS overwrites with trigger's getBoundingClientRect */
+    top: 0;
+    width: 200px;
+    max-height: 0;
+    margin-left: 0;
+    padding: 0;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    box-shadow: var(--shadow-lg);
+    opacity: 0;
+    visibility: hidden;
+    z-index: 50;
+    transition: opacity 180ms ease, visibility 180ms;
+  }
+  .nav-submenu::before { display: none; }
+  .nav-item-group.is-open .nav-submenu {
+    max-height: 400px;
+    padding: 6px 0;
+    opacity: 1;
+    visibility: visible;
+  }
+  .nav-submenu a { padding: 8px 14px; font-size: 13px; border-radius: 6px; margin: 0 6px; }
+  .nav-submenu a:hover { padding-left: 14px; }
+
+  /* Chat */
+  .chat-shell { grid-template-columns: 240px 1fr; }
+}
+
+@media (max-width: 720px) {
+  /* ---- Shell / sidebar drawer ----
+     Sidebar becomes position:fixed (off-grid), so collapse the grid to a
+     single column — otherwise .main is auto-placed into the empty column-1
+     (0px) and disappears. */
+  .shell { display: block; }
+  .d-sidebar {
+    position: fixed;
+    top: 0; left: 0;
+    width: 280px;
+    height: 100vh;
+    z-index: 100;                 /* above backdrop (90) */
+    transform: translateX(-100%);
+    transition: transform 240ms cubic-bezier(.2,.7,.2,1);
+    box-shadow: 0 12px 40px -8px rgb(0 0 0 / 0.4);
+
+    /* Restore full-width nav (override the 1100px collapse) */
+    padding: 22px 16px 18px;
+    overflow-y: auto;             /* override 1100px rail-mode 'visible' so long menus scroll */
+    overscroll-behavior: contain;
+  }
+  .brand-text, .brand-tag, .nav-label, .nav-link > span:not(.nav-badge), .nav-link .nav-badge,
+  .workspace-text, .workspace-chev, .nav-submenu, .nav-link .chev { display: revert; }
+  .brand { justify-content: flex-start; padding: 4px 10px 20px; }
+  .nav-link { justify-content: flex-start; padding: 9px 12px; }
+  .workspace { justify-content: flex-start; padding: 6px 10px; }
+
+  /* Revert rail-mode flyout submenu back to inline-accordion (desktop) behavior.
+     Without this, the absolute-positioned flyout from the 1100px block leaks
+     into mobile and the submenu pops out as a floating card next to the drawer. */
+  .nav-item-group { position: static; }
+  .nav-submenu {
+    position: static;
+    left: auto; top: auto;
+    width: auto;
+    margin-left: 20px;
+    padding: 0 0 0 14px;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    opacity: 1;
+    visibility: visible;
+    max-height: 0;
+    transition: max-height 280ms cubic-bezier(.4,0,.2,1);
+  }
+  .nav-submenu::before { display: block; }
+  .nav-item-group.is-open .nav-submenu {
+    max-height: 400px;
+    padding: 4px 0 6px 14px;
+    opacity: 1;
+    visibility: visible;
+  }
+  .nav-submenu a { margin: 0; padding: 7px 10px; font-size: 12.5px; border-radius: 6px; }
+  .nav-submenu a:hover { padding-left: 13px; }
+
+  body.has-drawer-open .d-sidebar { transform: translateX(0); }
+  body.has-drawer-open { overflow: hidden; }   /* lock scroll behind backdrop */
+
+  .hamburger { display: inline-flex; }
+
+  /* ---- Topbar: aggressive de-clutter ---- */
+  .d-topbar { padding: 0 12px; }
+  .topbar-actions { gap: 2px; }
+
+  /* Crumbs eat horizontal space — hide everything except the active page */
+  .crumbs { gap: 6px; min-width: 0; flex: 1; overflow: hidden; }
+  .crumbs > span:not(.current), .crumbs .sep { display: none; }
+  .crumbs .current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+  /* Search becomes its own icon-button (text + kbd hidden, padding tightened) */
+  .cmd { min-width: 0; padding: 0; width: 36px; height: 36px; justify-content: center; }
+  .cmd span, .cmd .kbd { display: none; }
+  .cmd svg { width: 16px; height: 16px; }
+
+  /* Trim avatar margin */
+  .avatar { margin-left: 2px; }
+
+  /* ---- Dropdowns: prevent off-screen overflow ---- */
+  .dd-menu {
+    min-width: 0;
+    width: calc(100vw - 16px);
+    max-width: 360px;
+    right: -8px;            /* pin to viewport edge minus topbar padding (12px) */
+  }
+  .dd-menu.dd-profile {
+    width: calc(100vw - 16px);
+    max-width: 280px;
+  }
+
+  /* ---- Content / hero / footer ---- */
+  .content { padding: 20px 16px 16px; }
+  .d-footer { padding: 20px 16px; flex-direction: column; gap: 10px; align-items: flex-start; }
+  .hero { flex-direction: column; align-items: flex-start; gap: 20px; }
+  .hero-actions { flex-wrap: wrap; }
+
+  /* ---- Generic grid ---- */
+  .grid { gap: 16px; }
+
+  /* ---- Dashboard ---- */
+  .kpi-grid { grid-template-columns: 1fr; }
+  .sv-regions { grid-template-columns: 1fr; gap: 22px; }
+  .monthly-footer { grid-template-columns: repeat(2, 1fr); gap: 16px; }
+  .wx-forecast { grid-template-columns: repeat(4, 1fr); gap: 6px; }
+  .wx-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
+  .wx-date { text-align: left; }
+  .sales-summary { flex-direction: column; align-items: flex-start; gap: 12px; }
+
+  /* Card breathing room */
+  .card { padding: 18px; }
+  .card-head { flex-wrap: wrap; gap: 10px; }
+
+  /* ---- Charts page ---- */
+  .chart-canvas-wrap { min-height: 200px; }
+
+  /* ---- Tables: ensure horizontal scroll fallback ---- */
+  .data-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
+  .data-toolbar-left, .data-toolbar-right { min-width: 0; flex-wrap: wrap; }
+  .data-foot { flex-direction: column; gap: 12px; align-items: flex-start; }
+
+  /* ---- Email ---- */
+  .mail-shell { grid-template-columns: 1fr; }
+  .mail-rail { display: none; }
+  .mail-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
+
+  /* ---- Chat ---- */
+  .chat-shell { grid-template-columns: 1fr; height: auto; }
+  .chat-rail { display: none; }
+
+  /* ---- Calendar ---- */
+  .cal-shell { grid-template-columns: 1fr; }
+  .cal-toolbar { flex-wrap: wrap; gap: 10px; padding: 14px; }
+  .cal-toolbar-left { width: 100%; justify-content: space-between; }
+  .cal-views { order: 3; }
+  .cal-grid { grid-auto-rows: minmax(78px, 1fr); }
+  .cal-weekdays > div { padding: 8px 6px; font-size: 9px; letter-spacing: 0.1em; }
+  .cal-cell { padding: 5px; }
+  .cal-chip-time { display: none; }
+
+  /* ---- Compose page (inline-styled form rows) ---- */
+  .compose-row { grid-template-columns: 1fr !important; gap: 6px !important; }
+  .compose-row-actions { justify-content: flex-start !important; }
+
+  /* ---- Auth pages ---- */
+  .auth-main { padding: 24px 20px; }
+}
+
+@media (max-width: 480px) {
+  .monthly-footer { grid-template-columns: 1fr; }
+  .wx-forecast { grid-template-columns: repeat(2, 1fr); }
+  .form-actions { flex-direction: column; align-items: stretch; }
+  .form-actions .btn { width: 100%; justify-content: center; }
+  .form-actions .spacer { display: none; }
+  .social-row { grid-template-columns: 1fr; }
+}

package/src/assets/styles/2026/_shell.scss

@@ -0,0 +1,290 @@
+/* ============ SHELL ============ */
+.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
+
+/* ============ SIDEBAR ============ */
+.d-sidebar {
+  background: var(--bg-sidebar);
+  border-right: 1px solid var(--border);
+  padding: 22px 16px 18px;
+  position: sticky; top: 0;
+  height: 100vh;
+  display: flex; flex-direction: column; gap: 22px;
+  overflow-y: auto;
+}
+.d-sidebar::-webkit-scrollbar { width: 4px; }
+.d-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+
+.brand {
+  display: flex; align-items: center; gap: 10px;
+  padding: 4px 10px 20px;
+  border-bottom: 1px solid var(--border-soft);
+}
+.brand-logo {
+  width: 32px; height: 32px;
+  background: var(--primary);
+  border-radius: 8px;
+  display: grid; place-items: center;
+  box-shadow: 0 4px 10px -2px color-mix(in oklab, var(--primary) 40%, transparent);
+}
+.brand-logo svg { width: 18px; height: 18px; }
+.brand-text { line-height: 1.1; }
+.brand-name {
+  font-family: 'Inter Tight', 'Inter', sans-serif;
+  font-weight: 700;
+  font-size: 15.5px;
+  color: var(--t-base);
+  letter-spacing: -0.02em;
+}
+.brand-tag {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px;
+  color: var(--t-light);
+  letter-spacing: 0.1em;
+}
+
+.nav-section { display: flex; flex-direction: column; gap: 2px; }
+.nav-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--t-light);
+  padding: 0 10px 6px;
+}
+
+.nav-link {
+  display: flex; align-items: center; gap: 12px;
+  padding: 9px 12px;
+  border-radius: 8px;
+  color: var(--t-muted);
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
+  line-height: 1.2;
+}
+.nav-link > svg {
+  width: 17px; height: 17px;
+  stroke: currentColor; stroke-width: 1.75; fill: none;
+  flex-shrink: 0;
+  display: block;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.nav-link > span:not(.nav-badge) { min-width: 0; flex: 1; }
+.nav-link:hover { background: var(--bg-hover); color: var(--t-base); }
+.nav-link.is-active {
+  color: var(--primary);
+  background: var(--primary-soft);
+  box-shadow: inset 3px 0 0 var(--primary);
+}
+
+.nav-badge {
+  flex: 0 0 auto;
+  margin-left: auto;
+  font-family: 'Inter', sans-serif;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding: 2px 6px;
+  line-height: 1.4;
+  border-radius: 999px;
+}
+.nav-badge.pro { background: var(--primary); color: #fff; }
+.nav-badge.hot { background: var(--danger-soft); color: var(--danger); }
+.nav-badge.new { background: var(--success-soft); color: var(--success); }
+
+/* Dropdown nav items */
+.nav-item-group .nav-link .chev {
+  width: 11px; height: 11px; margin-left: auto;
+  transition: transform 200ms ease;
+}
+.nav-item-group.is-open .nav-link .chev { transform: rotate(90deg); }
+.nav-submenu {
+  overflow: hidden;
+  max-height: 0;
+  margin-left: 20px;
+  padding-left: 14px;
+  position: relative;
+  transition: max-height 280ms cubic-bezier(.4,0,.2,1);
+}
+.nav-submenu::before {
+  content: '';
+  position: absolute;
+  left: 0; top: 6px; bottom: 6px;
+  width: 1px;
+  background: var(--border);
+}
+.nav-item-group.is-open .nav-submenu { max-height: 400px; padding-top: 4px; padding-bottom: 6px; }
+.nav-submenu a {
+  display: flex; align-items: center;
+  padding: 7px 10px;
+  font-size: 12.5px;
+  color: var(--t-muted);
+  border-radius: 6px;
+  transition: color 160ms ease, background-color 160ms ease, padding-left 160ms ease;
+}
+.nav-submenu a:hover {
+  color: var(--t-base);
+  background: var(--bg-hover);
+  padding-left: 13px;
+}
+.nav-submenu a.is-active {
+  color: var(--primary);
+  font-weight: 600;
+  background: var(--primary-soft);
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-soft);
+}
+.workspace {
+  display: flex; align-items: center; gap: 10px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  transition: background-color 180ms ease;
+}
+.workspace:hover { background: var(--bg-hover); }
+.workspace-avatar {
+  width: 32px; height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--primary), var(--purple));
+  color: #fff;
+  display: grid; place-items: center;
+  font-weight: 600;
+  font-size: 12.5px;
+  flex-shrink: 0;
+}
+.workspace-text { line-height: 1.2; min-width: 0; }
+.workspace-name { font-size: 13px; color: var(--t-base); font-weight: 600; }
+.workspace-role { font-size: 11px; color: var(--t-light); }
+.workspace-chev { margin-left: auto; color: var(--t-light); }
+
+/* ============ MAIN ============ */
+.main { display: flex; flex-direction: column; min-width: 0; }
+
+/* ============ HAMBURGER (mobile only — see _responsive.scss) ============ */
+.hamburger {
+  display: none; /* Shown via media query under 720px */
+  width: 36px; height: 36px;
+  align-items: center; justify-content: center;
+  border-radius: 8px;
+  color: var(--t-base);
+  margin-right: 4px;
+  transition: background 160ms;
+}
+.hamburger:hover { background: var(--bg-hover); }
+.hamburger svg { width: 20px; height: 20px; }
+
+/* ============ MOBILE DRAWER BACKDROP ============ */
+.drawer-backdrop {
+  position: fixed; inset: 0;
+  background: rgb(15 23 42 / 0.5);
+  backdrop-filter: blur(2px);
+  z-index: 90;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 240ms ease, visibility 240ms;
+}
+body.has-drawer-open .drawer-backdrop {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* ============ TOPBAR ============ */
+.d-topbar {
+  height: 60px;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0 32px;
+  border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; z-index: 10;
+  backdrop-filter: saturate(140%) blur(10px);
+  -webkit-backdrop-filter: saturate(140%) blur(10px);
+  background: var(--overlay);
+}
+.crumbs {
+  display: flex; align-items: center; gap: 10px;
+  color: var(--t-muted);
+  font-size: 13px;
+  font-weight: 500;
+}
+.crumbs .sep { color: var(--t-light); }
+.crumbs .current { color: var(--t-base); font-weight: 600; }
+.topbar-actions { display: flex; align-items: center; gap: 6px; }
+
+.cmd {
+  display: inline-flex; align-items: center; gap: 10px;
+  padding: 7px 10px 7px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-card);
+  color: var(--t-light);
+  font-size: 13px;
+  transition: all 200ms ease;
+  min-width: 220px;
+}
+.cmd:hover { border-color: var(--primary); color: var(--t-muted); box-shadow: 0 0 0 3px var(--primary-soft); }
+.cmd svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
+.cmd span { flex: 1; text-align: left; }
+.kbd {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--bg-muted);
+  color: var(--t-muted);
+  border: 1px solid var(--border);
+}
+
+.icon-btn {
+  width: 36px; height: 36px;
+  display: grid; place-items: center;
+  border-radius: 8px;
+  color: var(--t-muted);
+  transition: background 180ms, color 180ms;
+  position: relative;
+}
+.icon-btn:hover { background: var(--bg-hover); color: var(--t-base); }
+.icon-btn > svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; fill: none; }
+.icon-btn .count {
+  position: absolute;
+  top: 5px; right: 5px;
+  min-width: 16px; height: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  font-size: 9.5px;
+  font-weight: 600;
+  display: grid; place-items: center;
+  border: 2px solid var(--bg-body);
+  line-height: 1;
+}
+.icon-btn .count.danger { background: var(--danger); color: #fff; }
+.icon-btn .count.info { background: var(--info); color: #fff; }
+
+.avatar {
+  width: 34px; height: 34px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--primary), var(--purple));
+  color: #fff;
+  display: grid; place-items: center;
+  font-weight: 600;
+  font-size: 13px;
+  margin-left: 6px;
+  border: 2px solid var(--bg-card);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+}
+
+/* ============ FOOTER ============ */
+.d-footer {
+  padding: 24px 32px 28px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--t-muted);
+  font-size: 12px;
+}
+.d-footer a { color: var(--primary); font-weight: 600; }
+.d-footer a:hover { color: var(--primary-dark); }
+.d-footer-meta { display: flex; gap: 20px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--t-light); letter-spacing: 0.06em; }

package/src/assets/styles/2026/_tokens.scss

@@ -0,0 +1,80 @@
+/* ============ DESIGN TOKENS — 2026 ============ */
+
+:root[data-theme="light"] {
+  /* Surfaces */
+  --bg-body:       #F0F4F8;
+  --bg-card:       #FFFFFF;
+  --bg-sidebar:    #FFFFFF;
+  --bg-hover:      #F8FAFC;
+  --bg-muted:      #F1F5F9;
+
+  /* Text */
+  --t-base:        #1E293B;
+  --t-muted:       #64748B;
+  --t-light:       #94A3B8;
+  --t-inverse:     #FFFFFF;
+
+  /* Borders */
+  --border:        #E4E8EF;
+  --border-soft:   #EEF1F5;
+
+  /* Brand — blue */
+  --primary:       #2563EB;
+  --primary-light: #3B82F6;
+  --primary-dark:  #1D4ED8;
+  --primary-soft:  #EFF6FF;
+  --primary-ring:  rgba(37, 99, 235, 0.18);
+
+  /* Semantic */
+  --success:       #10B981;
+  --success-soft:  #ECFDF5;
+  --warning:       #F59E0B;
+  --warning-soft:  #FFFBEB;
+  --danger:        #EF4444;
+  --danger-soft:   #FEF2F2;
+  --info:          #0EA5E9;
+  --info-soft:     #F0F9FF;
+  --purple:        #8B5CF6;
+  --purple-soft:   #F5F3FF;
+  --pink:          #EC4899;
+  --pink-soft:     #FDF2F8;
+  --teal:          #14B8A6;
+  --teal-soft:     #F0FDFA;
+  --orange:        #F97316;
+  --orange-soft:   #FFF7ED;
+  --shadow-sm:   0 1px 2px 0 rgb(15 23 42 / 0.04);
+  --shadow-card: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04);
+  --shadow-lg:   0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.05);
+  --overlay: rgba(240, 244, 248, 0.72);
+}
+
+:root[data-theme="dark"] {
+  --bg-body:       #0B1120;
+  --bg-card:       #141B2D;
+  --bg-sidebar:    #141B2D;
+  --bg-hover:      #1C2438;
+  --bg-muted:      #1A2237;
+  --t-base:        #F1F5F9;
+  --t-muted:       #94A3B8;
+  --t-light:       #64748B;
+  --t-inverse:     #0B1120;
+  --border:        #222C42;
+  --border-soft:   #1A2237;
+  --primary:       #60A5FA;
+  --primary-light: #93C5FD;
+  --primary-dark:  #3B82F6;
+  --primary-soft:  #0F2847;
+  --primary-ring:  rgba(96, 165, 250, 0.24);
+  --success:       #34D399;  --success-soft:  #0F2A20;
+  --warning:       #FBBF24;  --warning-soft:  #2B1F08;
+  --danger:        #F87171;  --danger-soft:   #2B1414;
+  --info:          #38BDF8;  --info-soft:     #0D2232;
+  --purple:        #A78BFA;  --purple-soft:   #1E1A2C;
+  --pink:          #F472B6;  --pink-soft:     #2A1424;
+  --teal:          #2DD4BF;  --teal-soft:     #0E2826;
+  --orange:        #FB923C;  --orange-soft:   #2A1810;
+  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.4);
+  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.25);
+  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+  --overlay: rgba(11, 17, 32, 0.72);
+}