millas 0.2.12-beta-1 → 0.2.13

package/src/admin/static/admin.css

@@ -0,0 +1,1422 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      /* ── Palette ── */
+      --bg:           #f6f7f8;
+      --surface:      #ffffff;
+      --surface2:     #fafafa;
+      --surface3:     #f0f1f2;
+      --border:       #e5e7eb;
+      --border-soft:  #f0f1f2;
+
+      /* ── Brand (Cloudflare Orange) ── */
+      --primary:      #f6821f;
+      --primary-h:    #e06d1a;
+      --primary-soft: #fff4e6;
+      --primary-dim:  #ffe4c4;
+
+      /* ── Text ── */
+      --text:         #172b4d;
+      --text-soft:    #2c3e50;
+      --text-muted:   #6b7280;
+      --text-xmuted:  #9ca3af;
+
+      /* ── Semantic ── */
+      --success:      #10b981;
+      --success-bg:   #ecfdf5;
+      --success-border:#a7f3d0;
+      --danger:       #ef4444;
+      --danger-bg:    #fef2f2;
+      --danger-border:#fecaca;
+      --warning:      #f59e0b;
+      --warning-bg:   #fffbeb;
+      --warning-border:#fde68a;
+      --info:         #3b82f6;
+      --info-bg:      #eff6ff;
+      --info-border:  #bfdbfe;
+
+      /* ── Shape ── */
+      --radius:       6px;
+      --radius-sm:    4px;
+      --radius-lg:    8px;
+      --shadow-sm:    0 1px 2px rgba(0,0,0,.05);
+      --shadow:       0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
+      --shadow-lg:    0 10px 25px rgba(0,0,0,.1), 0 4px 10px rgba(0,0,0,.05);
+
+      /* ── Sidebar ── */
+      --sidebar-w:    232px;
+    }
+
+    body {
+      font-family: 'DM Sans', system-ui, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      display: flex;
+      height: 100vh;
+      overflow: hidden;
+      font-size: 14px;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    /* ════════════════════════════════════════
+       ICONS  (inline SVG sprite system)
+       ════════════════════════════════════════ */
+    .icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .icon svg {
+      width: 1em;
+      height: 1em;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.75;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    .icon-sm svg  { stroke-width: 2; }
+    .icon-14 { font-size: 14px; }
+    .icon-15 { font-size: 15px; }
+    .icon-16 { font-size: 16px; }
+    .icon-18 { font-size: 18px; }
+    .icon-20 { font-size: 20px; }
+
+    /* ════════════════════════════════════════
+       SIDEBAR
+       ════════════════════════════════════════ */
+    #sidebar {
+      width: var(--sidebar-w);
+      min-width: var(--sidebar-w);
+      background: var(--surface);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    .sidebar-brand {
+      padding: 18px 16px 16px;
+      border-bottom: 1px solid var(--border-soft);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .brand-logo {
+      width: 34px; height: 34px;
+      background: linear-gradient(135deg, #f6821f 0%, #ff9a3c 100%);
+      border-radius: 9px;
+      display: flex; align-items: center; justify-content: center;
+      color: #fff;
+      font-size: 16px;
+      flex-shrink: 0;
+      box-shadow: 0 2px 6px rgba(246,130,31,.25);
+    }
+    .brand-text { line-height: 1.25; overflow: hidden; }
+    .brand-name {
+      font-size: 13.5px;
+      font-weight: 700;
+      color: var(--text);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .brand-sub { font-size: 11px; color: var(--text-muted); }
+
+    .nav-section { padding: 10px 10px 4px; }
+    .nav-label {
+      font-size: 10.5px;
+      font-weight: 600;
+      color: var(--text-xmuted);
+      text-transform: uppercase;
+      letter-spacing: 0.7px;
+      padding: 0 8px 6px;
+    }
+    .nav-item {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      padding: 7px 10px;
+      border-radius: var(--radius-sm);
+      color: var(--text-muted);
+      text-decoration: none;
+      font-size: 13.5px;
+      font-weight: 500;
+      transition: background .12s, color .12s;
+      cursor: pointer;
+      border: none;
+      background: none;
+      width: 100%;
+      text-align: left;
+    }
+    .nav-item:hover  { background: var(--surface2); color: var(--text-soft); }
+    .nav-item.active { background: var(--primary-soft); color: var(--primary); border-left: 3px solid var(--primary); padding-left: 7px; }
+    .nav-item.active .nav-icon { color: var(--primary); }
+
+    .nav-icon {
+      color: var(--text-xmuted);
+      transition: color .12s;
+      width: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .nav-item:hover .nav-icon { color: var(--text-soft); }
+    .nav-item.active .nav-icon { color: var(--primary); }
+
+    .nav-count {
+      margin-left: auto;
+      font-size: 11px;
+      font-weight: 500;
+      background: var(--surface3);
+      color: var(--text-muted);
+      padding: 1px 6px;
+      border-radius: 99px;
+      min-width: 20px;
+      text-align: center;
+    }
+
+    .sidebar-footer {
+      margin-top: auto;
+      padding: 12px 16px;
+      border-top: 1px solid var(--border-soft);
+    }
+    .sidebar-version {
+      font-size: 11px;
+      color: var(--text-xmuted);
+    }
+
+    /* ── User row ── */
+    .user-row {
+      display: flex; align-items: center; gap: 9px;
+    }
+    .user-avatar {
+      width: 30px; height: 30px; border-radius: 8px;
+      background: var(--primary-dim); color: var(--primary);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 13px; font-weight: 700; flex-shrink: 0;
+    }
+    .user-info { flex: 1; min-width: 0; }
+    .user-name  { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
+    .user-email { font-size: 11px; color: var(--text-muted); }
+    .logout-btn {
+      flex-shrink: 0; padding: 5px;
+      border-radius: 5px; color: var(--text-muted);
+      display: flex; align-items: center;
+      transition: background .1s, color .1s;
+    }
+    .logout-btn:hover { background: var(--surface3); color: var(--danger); }
+
+    /* ════════════════════════════════════════
+       MAIN AREA
+       ════════════════════════════════════════ */
+    #main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      min-width: 0;
+    }
+
+    /* ── Topbar ── */
+    #topbar {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      padding: 0 24px;
+      height: 54px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-shrink: 0;
+      box-shadow: var(--shadow-sm);
+    }
+    .topbar-title {
+      font-size: 15px;
+      font-weight: 600;
+      flex: 1;
+      color: var(--text);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .topbar-actions { display: flex; gap: 8px; align-items: center; }
+
+    /* ── Content ── */
+    #content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 24px;
+    }
+
+    /* ════════════════════════════════════════
+       BREADCRUMB
+       ════════════════════════════════════════ */
+    .breadcrumb {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 12px;
+      color: var(--text-muted);
+      margin-bottom: 18px;
+    }
+    .breadcrumb a { color: var(--text-muted); text-decoration: none; }
+    .breadcrumb a:hover { color: var(--primary); }
+    .breadcrumb-sep { color: var(--border); }
+    .breadcrumb-current { color: var(--text-soft); font-weight: 500; }
+
+    /* ════════════════════════════════════════
+       ALERTS
+       ════════════════════════════════════════ */
+    .alert {
+      padding: 11px 16px;
+      border-radius: var(--radius-sm);
+      font-size: 13px;
+      margin-bottom: 18px;
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      border: 1px solid transparent;
+    }
+    .alert-success { background: var(--success-bg); color: var(--success);  border-color: var(--success-border); }
+    .alert-error   { background: var(--danger-bg);  color: var(--danger);   border-color: var(--danger-border); }
+    .alert-warning { background: var(--warning-bg); color: var(--warning);  border-color: var(--warning-border); }
+    .alert-info    { background: var(--info-bg);    color: var(--info);     border-color: var(--info-border); }
+    .alert-close {
+      margin-left: auto;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: inherit;
+      opacity: .6;
+      padding: 0;
+      line-height: 1;
+      font-size: 16px;
+    }
+    .alert-close:hover { opacity: 1; }
+
+    /* ════════════════════════════════════════
+       CARDS
+       ════════════════════════════════════════ */
+    .card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      overflow: hidden;
+      box-shadow: var(--shadow-sm);
+    }
+    .card-header {
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--border-soft);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex-wrap: wrap;
+      background: var(--surface);
+    }
+    .card-title {
+      font-size: 13.5px;
+      font-weight: 600;
+      color: var(--text);
+      display: flex;
+      align-items: center;
+      gap: 7px;
+    }
+    .card-body { padding: 20px; }
+
+    /* ════════════════════════════════════════
+       STAT CARDS
+       ════════════════════════════════════════ */
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+      gap: 10px;
+      margin-bottom: 18px;
+    }
+    .stat-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 10px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      transition: box-shadow .15s, border-color .15s;
+      text-decoration: none;
+      box-shadow: var(--shadow-sm);
+    }
+    .stat-card:hover {
+      box-shadow: var(--shadow);
+      border-color: var(--primary-dim);
+    }
+    .stat-icon-wrap {
+      width: 28px; height: 28px;
+      border-radius: 7px;
+      background: linear-gradient(135deg, #fff4e6 0%, #ffe4c4 100%);
+      display: flex; align-items: center; justify-content: center;
+      color: var(--primary);
+      margin-bottom: 2px;
+    }
+    .stat-label {
+      font-size: 10.5px;
+      color: var(--text-muted);
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+    }
+    .stat-value {
+      font-size: 20px;
+      font-weight: 700;
+      color: var(--text);
+      line-height: 1;
+      letter-spacing: -0.3px;
+    }
+    .stat-sub { font-size: 11px; color: var(--text-muted); }
+
+    /* ════════════════════════════════════════
+       TABLE
+       ════════════════════════════════════════ */
+    .table-wrap { overflow-x: auto; }
+    table { width: 100%; border-collapse: collapse; }
+    th {
+      text-align: left;
+      padding: 9px 16px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--text-muted);
+      background: var(--surface2);
+      border-bottom: 1px solid var(--border);
+      white-space: nowrap;
+    }
+    th.sortable { cursor: pointer; user-select: none; }
+    th.sortable:hover { color: var(--text-soft); }
+    th.sort-active { color: var(--primary); }
+    .sort-indicator { display: inline-flex; flex-direction: column; gap: 1px; margin-left: 4px; vertical-align: middle; }
+    .sort-indicator span { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: .3; }
+    .sort-indicator .up   { border-bottom: 5px solid currentColor; }
+    .sort-indicator .down { border-top: 5px solid currentColor; }
+    th.sort-asc  .sort-indicator .up   { opacity: 1; }
+    th.sort-desc .sort-indicator .down { opacity: 1; }
+    td {
+      padding: 11px 16px;
+      font-size: 13px;
+      border-bottom: 1px solid var(--border-soft);
+      vertical-align: middle;
+      color: var(--text-soft);
+    }
+    tr:last-child td { border-bottom: none; }
+    tr:hover td { background: var(--surface2); }
+    .col-check { width: 44px; }
+    .col-actions { width: 100px; text-align: right; }
+    .td-primary { color: var(--text); font-weight: 500; }
+
+    /* ── Row checkbox ── */
+    .row-check {
+      width: 16px; height: 16px;
+      cursor: pointer;
+      accent-color: var(--primary);
+    }
+
+    /* ── Action menu ── */
+    .action-menu { position: relative; display: inline-block; }
+    .action-menu-btn {
+      background: none;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      padding: 4px 8px;
+      cursor: pointer;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      gap: 3px;
+      font-size: 12px;
+      transition: all .12s;
+    }
+    .action-menu-btn:hover { background: var(--surface2); color: var(--text-soft); border-color: var(--border); }
+    .action-dropdown {
+      position: absolute;
+      right: 0;
+      top: calc(100% + 4px);
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow-lg);
+      min-width: 140px;
+      z-index: 50;
+      overflow: hidden;
+      display: none;
+    }
+    .action-dropdown.open { display: block; }
+    .action-dropdown a,
+    .action-dropdown button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 14px;
+      font-size: 13px;
+      color: var(--text-soft);
+      text-decoration: none;
+      background: none;
+      border: none;
+      width: 100%;
+      text-align: left;
+      cursor: pointer;
+      font-family: inherit;
+      transition: background .1s;
+    }
+    .action-dropdown a:hover,
+    .action-dropdown button:hover { background: var(--surface2); }
+    .action-dropdown .sep { height: 1px; background: var(--border-soft); margin: 3px 0; }
+    .action-dropdown .danger { color: var(--danger); }
+
+    /* ════════════════════════════════════════
+       BADGES
+       ════════════════════════════════════════ */
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      border-radius: 99px;
+      font-size: 11.5px;
+      font-weight: 600;
+      white-space: nowrap;
+      border: 1px solid transparent;
+    }
+    .badge-blue    { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
+    .badge-red     { background: #fef2f2; color: #ef4444; border-color: #fecaca; }
+    .badge-green   { background: #ecfdf5; color: #10b981; border-color: #a7f3d0; }
+    .badge-yellow  { background: #fffbeb; color: #f59e0b; border-color: #fde68a; }
+    .badge-purple  { background: #faf5ff; color: #a855f7; border-color: #e9d5ff; }
+    .badge-gray    { background: #f9fafb; color: #6b7280; border-color: #e5e7eb; }
+    .badge-orange  { background: #fff4e6; color: #f6821f; border-color: #ffe4c4; }
+
+    /* ════════════════════════════════════════
+       BUTTONS
+       ════════════════════════════════════════ */
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 7px 14px;
+      border-radius: var(--radius-sm);
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      border: 1px solid transparent;
+      transition: all .12s;
+      text-decoration: none;
+      font-family: inherit;
+      line-height: 1;
+      white-space: nowrap;
+    }
+    .btn-primary {
+      background: linear-gradient(135deg, #f6821f 0%, #ff9a3c 100%);
+      color: #fff;
+      border-color: var(--primary);
+      box-shadow: 0 1px 3px rgba(246,130,31,.25);
+    }
+    .btn-primary:hover { background: var(--primary-h); border-color: var(--primary-h); }
+    .btn-ghost {
+      background: transparent;
+      color: var(--text-soft);
+      border-color: var(--border);
+    }
+    .btn-ghost:hover { background: var(--surface2); color: var(--text); }
+    .btn-danger {
+      background: transparent;
+      color: var(--danger);
+      border-color: var(--border);
+    }
+    .btn-danger:hover { background: var(--danger-bg); border-color: var(--danger-border); }
+    .btn-success {
+      background: var(--success);
+      color: #fff;
+      border-color: var(--success);
+    }
+    .btn-success:hover { opacity: .9; }
+    .btn-sm { padding: 5px 10px; font-size: 12px; }
+    .btn-xs { padding: 3px 8px; font-size: 11px; }
+    .btn-icon { padding: 6px; }
+    .btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
+
+    /* ════════════════════════════════════════
+       FORMS
+       ════════════════════════════════════════ */
+    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
+    .form-group { display: flex; flex-direction: column; gap: 5px; }
+    .form-group.full  { grid-column: 1 / -1; }
+    .form-group.w-third { grid-column: span 1; }
+    .form-label { font-size: 12.5px; font-weight: 500; color: var(--text-soft); }
+    .form-label .required { color: var(--danger); margin-left: 2px; }
+    .form-control {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      color: var(--text);
+      border-radius: var(--radius-sm);
+      padding: 8px 11px;
+      font-size: 13.5px;
+      width: 100%;
+      outline: none;
+      font-family: inherit;
+      transition: border .12s, box-shadow .12s;
+    }
+    .form-control:hover  { border-color: #c4c9d4; }
+    .form-control:focus  {
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px var(--primary-soft);
+    }
+    .form-control.error {
+      border-color: var(--danger);
+      box-shadow: 0 0 0 3px var(--danger-bg);
+    }
+    .form-control::placeholder { color: var(--text-xmuted); }
+    select.form-control { cursor: pointer; }
+    textarea.form-control { resize: vertical; min-height: 90px; }
+    .form-help  { font-size: 11.5px; color: var(--text-muted); }
+    .form-error { font-size: 11.5px; color: var(--danger); display: flex; align-items: center; gap: 4px; }
+
+    /* ── Checkbox / radio ── */
+    .check-group { display: flex; align-items: center; gap: 8px; }
+    .check-input {
+      width: 16px; height: 16px;
+      accent-color: var(--primary);
+      cursor: pointer;
+    }
+    .check-label { font-size: 13.5px; color: var(--text-soft); cursor: pointer; }
+
+    /* ── Search ── */
+    .search-wrap { position: relative; }
+    .search-icon-inner {
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--text-muted);
+      pointer-events: none;
+      font-size: 14px;
+      display: flex;
+    }
+    .search-input { padding-left: 34px !important; width: 220px; }
+
+    /* ════════════════════════════════════════
+       TOOLBAR (list page)
+       ════════════════════════════════════════ */
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 18px;
+      border-bottom: 1px solid var(--border-soft);
+      flex-wrap: wrap;
+    }
+    .toolbar-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
+    .toolbar-right { display: flex; align-items: center; gap: 8px; }
+
+    /* ── Bulk action bar ── */
+    .bulk-bar {
+      display: none;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 18px;
+      background: var(--primary-soft);
+      border-bottom: 1px solid var(--primary-dim);
+      font-size: 13px;
+    }
+    .bulk-bar.visible { display: flex; }
+    .bulk-count { font-weight: 600; color: var(--primary); }
+
+    /* ════════════════════════════════════════
+       FILTER PANEL
+       ════════════════════════════════════════ */
+    .filter-row {
+      display: flex;
+      align-items: flex-end;
+      gap: 10px;
+      padding: 12px 18px;
+      border-bottom: 1px solid var(--border-soft);
+      flex-wrap: wrap;
+      background: var(--surface2);
+    }
+    .filter-group { display: flex; flex-direction: column; gap: 4px; }
+    .filter-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
+    .filter-control {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      color: var(--text);
+      border-radius: var(--radius-sm);
+      padding: 6px 10px;
+      font-size: 12.5px;
+      outline: none;
+      font-family: inherit;
+      transition: border .12s;
+    }
+    .filter-control:focus { border-color: var(--primary); }
+
+    /* ════════════════════════════════════════
+       PAGINATION
+       ════════════════════════════════════════ */
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+      padding: 12px 18px;
+      border-top: 1px solid var(--border-soft);
+      flex-wrap: wrap;
+    }
+    .page-info { font-size: 12px; color: var(--text-muted); margin-left: auto; }
+    .page-btn {
+      min-width: 30px;
+      height: 30px;
+      padding: 0 6px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--text-soft);
+      cursor: pointer;
+      font-size: 12px;
+      font-family: inherit;
+      transition: all .12s;
+      text-decoration: none;
+    }
+    .page-btn:hover:not(:disabled) { background: var(--surface2); color: var(--text); border-color: #c4c9d4; }
+    .page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
+    .page-btn:disabled { opacity: .35; cursor: not-allowed; }
+    .page-ellipsis { color: var(--text-muted); font-size: 12px; padding: 0 3px; }
+
+    /* ════════════════════════════════════════
+       MODAL
+       ════════════════════════════════════════ */
+    .modal-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(17,24,39,.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 200;
+      padding: 24px;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity .18s;
+      backdrop-filter: blur(2px);
+    }
+    .modal-overlay.open { opacity: 1; pointer-events: all; }
+    .modal {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      width: 100%;
+      max-width: 520px;
+      max-height: 90vh;
+      overflow-y: auto;
+      transform: translateY(10px) scale(.99);
+      transition: transform .2s;
+      box-shadow: var(--shadow-lg);
+    }
+    .modal-overlay.open .modal { transform: translateY(0) scale(1); }
+    .modal-sm { max-width: 400px; }
+    .modal-lg { max-width: 700px; }
+    .modal-header {
+      padding: 18px 22px;
+      border-bottom: 1px solid var(--border-soft);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: sticky;
+      top: 0;
+      background: var(--surface);
+      z-index: 1;
+    }
+    .modal-title  { font-size: 15px; font-weight: 600; color: var(--text); }
+    .modal-body   { padding: 20px 22px; }
+    .modal-footer {
+      padding: 14px 22px;
+      border-top: 1px solid var(--border-soft);
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      position: sticky;
+      bottom: 0;
+      background: var(--surface);
+    }
+    .close-btn {
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      padding: 4px;
+      line-height: 1;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      transition: background .1s, color .1s;
+    }
+    .close-btn:hover { background: var(--surface3); color: var(--text); }
+
+    /* ════════════════════════════════════════
+       EMPTY STATE
+       ════════════════════════════════════════ */
+    .empty-state {
+      text-align: center;
+      padding: 56px 24px;
+      color: var(--text-muted);
+    }
+    .empty-icon {
+      width: 52px;
+      height: 52px;
+      background: var(--surface3);
+      border-radius: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 16px;
+      color: var(--text-xmuted);
+    }
+    .empty-title { font-size: 15px; font-weight: 600; color: var(--text-soft); margin-bottom: 7px; }
+    .empty-desc  { font-size: 13px; max-width: 320px; margin: 0 auto 20px; line-height: 1.6; }
+
+    /* ════════════════════════════════════════
+       CELL TYPES
+       ════════════════════════════════════════ */
+    .bool-yes {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; border-radius: 99px;
+      background: var(--success-bg); color: var(--success);
+    }
+    .bool-no {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; border-radius: 99px;
+      background: var(--danger-bg); color: var(--danger);
+    }
+    .cell-muted { color: var(--text-xmuted); font-style: italic; }
+    .cell-mono { font-family: 'DM Mono', monospace; font-size: 12px; }
+    .cell-image { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; border: 1px solid var(--border); }
+
+    /* ════════════════════════════════════════
+       TOAST
+       ════════════════════════════════════════ */
+    #toast-root {
+      position: fixed;
+      bottom: 22px;
+      right: 22px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      z-index: 500;
+      pointer-events: none;
+    }
+    .toast {
+      background: var(--text);
+      color: #fff;
+      border-radius: var(--radius);
+      padding: 11px 16px;
+      font-size: 13px;
+      max-width: 320px;
+      box-shadow: var(--shadow-lg);
+      pointer-events: all;
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      animation: toastIn .2s ease;
+    }
+    .toast-success .toast-dot { color: #4ade80; }
+    .toast-error   .toast-dot { color: #f87171; }
+    @keyframes toastIn { from { transform: translateX(16px); opacity: 0; } }
+
+    /* ════════════════════════════════════════
+       UTILITIES
+       ════════════════════════════════════════ */
+    .flex          { display: flex; }
+    .flex-col      { flex-direction: column; }
+    .items-center  { align-items: center; }
+    .justify-between { justify-content: space-between; }
+    .gap-1  { gap: 4px; }
+    .gap-2  { gap: 8px; }
+    .gap-3  { gap: 12px; }
+    .gap-4  { gap: 16px; }
+    .ml-auto { margin-left: auto; }
+    .text-muted    { color: var(--text-muted); }
+    .text-sm       { font-size: 12px; }
+    .text-xs       { font-size: 11px; }
+    .fw-500        { font-weight: 500; }
+    .fw-600        { font-weight: 600; }
+    .mb-3          { margin-bottom: 12px; }
+    .mb-4          { margin-bottom: 16px; }
+    .mb-5          { margin-bottom: 20px; }
+    .mb-6          { margin-bottom: 24px; }
+    .truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+    /* ════════════════════════════════════════
+       RESPONSIVE
+       ════════════════════════════════════════ */
+    @media (max-width: 768px) {
+      #sidebar { display: none; }
+      .form-grid { grid-template-columns: 1fr; }
+      .search-input { width: 160px; }
+    }
+
+/* ── Form page ────────────────────────────────────────────── */
+  /* ── Tab nav (form) ── */
+  .tab-nav {
+    display: flex;
+    gap: 0;
+    overflow-x: auto;
+  }
+  .tab-btn {
+    padding: 10px 18px;
+    font-size: 13.5px;
+    font-weight: 500;
+    color: var(--text-muted);
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    cursor: pointer;
+    font-family: inherit;
+    white-space: nowrap;
+    transition: color .12s, border-color .12s;
+  }
+  .tab-btn:hover  { color: var(--text-soft); }
+  .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--primary-soft); }
+
+  .tab-form-panel { display: none; }
+  .tab-form-panel.active { display: block; }
+
+  /* ── Readonly ── */
+  .readonly-value {
+    font-size: 13.5px;
+    color: var(--text-soft);
+    padding: 8px 12px;
+    background: var(--surface2);
+    border: 1px solid var(--border-soft);
+    border-radius: var(--radius-sm);
+    min-height: 36px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .readonly-pre {
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 10px;
+    font-family: 'DM Mono', monospace;
+    font-size: 12px;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    margin: 0;
+    color: var(--text-soft);
+  }
+
+  /* ── Password toggle ── */
+  .pw-toggle {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    padding: 0;
+  }
+  .pw-toggle:hover { color: var(--text-soft); }
+
+  /* ── Richtext ── */
+  .richtext-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
+  .richtext-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 6px 8px;
+    background: var(--surface2);
+    border-bottom: 1px solid var(--border);
+  }
+  .richtext-toolbar button {
+    width: 28px; height: 28px;
+    display: flex; align-items: center; justify-content: center;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 13px;
+    color: var(--text-soft);
+    font-family: inherit;
+    transition: all .1s;
+  }
+  .richtext-toolbar button:hover { background: var(--surface3); border-color: var(--border); }
+  .rt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
+  .richtext-editor {
+    border: none !important;
+    border-radius: 0 !important;
+    outline: none !important;
+    box-shadow: none !important;
+    padding: 12px;
+    line-height: 1.6;
+  }
+  .richtext-editor:focus { outline: none; }
+
+  /* ── Field feedback ── */
+  .field-feedback:empty { display: none; }
+
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  /* ══════════════════════════════════════════
+     FK DROPDOWN WIDGET
+     ══════════════════════════════════════════ */
+  .fk-widget {
+    position: relative;
+  }
+
+  /* Trigger button — styled like form-control */
+  .fk-trigger {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    text-align: left;
+    cursor: pointer;
+    background: var(--surface);
+    user-select: none;
+    padding: 0 12px;
+    height: 36px;
+    font-size: 13.5px;
+    color: var(--text);
+    transition: border-color .12s, box-shadow .12s;
+  }
+  .fk-trigger:hover { border-color: var(--primary); }
+  .fk-trigger[aria-expanded="true"] {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px var(--primary-soft);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .fk-trigger-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .fk-placeholder { color: var(--text-muted); font-size: 13px; }
+  .fk-id-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 1px 6px;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    font-size: 11px;
+    font-family: 'DM Mono', monospace;
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+  .fk-selected-label {
+    color: var(--text);
+    font-size: 13.5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .fk-loading-label { color: var(--text-muted); font-size: 13px; font-style: italic; }
+  .fk-chevron {
+    flex-shrink: 0;
+    color: var(--text-muted);
+    transition: transform .15s;
+  }
+  .fk-trigger[aria-expanded="true"] .fk-chevron { transform: rotate(180deg); }
+
+  /* Dropdown panel — rendered in portal via UI.Dropdown, position:fixed */
+  .fk-panel {
+    background: var(--surface);
+    border: 1px solid var(--primary);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 8px 24px rgba(0,0,0,.12);
+    overflow: hidden;
+    min-width: 240px;
+  }
+
+  /* Search bar */
+  .fk-search-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--border-soft);
+    background: var(--surface2);
+  }
+  .fk-search-wrap svg { color: var(--text-muted); flex-shrink: 0; }
+  .fk-search {
+    flex: 1;
+    border: none;
+    background: transparent;
+    font-size: 13px;
+    color: var(--text);
+    outline: none;
+    font-family: inherit;
+    padding: 0;
+  }
+  .fk-search::placeholder { color: var(--text-muted); }
+  .fk-search-clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-muted);
+    padding: 2px;
+    border-radius: 3px;
+    transition: color .1s, background .1s;
+  }
+  .fk-search-clear:hover { color: var(--text); background: var(--surface3); }
+  .fk-search-clear[hidden] { display: none; }
+
+  /* Options list */
+  .fk-list {
+    max-height: 220px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  .fk-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 12px;
+    cursor: pointer;
+    font-size: 13.5px;
+    color: var(--text);
+    transition: background .08s;
+    outline: none;
+  }
+  .fk-option:hover,
+  .fk-option.fk-focused { background: var(--primary-soft); }
+  .fk-option.fk-selected {
+    background: var(--primary-soft);
+    font-weight: 500;
+  }
+  .fk-option.fk-selected .fk-id-chip { background: var(--primary); color: #fff; border-color: var(--primary); }
+  .fk-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .fk-check {
+    margin-left: auto;
+    color: var(--primary);
+    flex-shrink: 0;
+  }
+
+  /* States */
+  .fk-empty-row {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 24px 12px;
+    color: var(--text-muted);
+    font-size: 13px;
+    text-align: center;
+    line-height: 1.5;
+  }
+  .fk-spinner-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 20px 12px;
+    color: var(--text-muted);
+    font-size: 13px;
+  }
+  @keyframes fk-spin { to { transform: rotate(360deg); } }
+  .fk-spin { animation: fk-spin .7s linear infinite; }
+
+  /* Skeleton loader rows */
+  .fk-skeleton-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+  }
+  .fk-skel {
+    display: inline-block;
+    border-radius: 4px;
+    background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
+    background-size: 200% 100%;
+    animation: fk-shimmer 1.4s infinite;
+  }
+  .fk-skel-chip  { width: 32px; height: 18px; border-radius: 4px; flex-shrink: 0; }
+  .fk-skel-text  { height: 13px; width: 65%; border-radius: 3px; }
+  @keyframes fk-shimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  /* Footer */
+  .fk-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 10px;
+    border-top: 1px solid var(--border-soft);
+    background: var(--surface2);
+  }
+  .fk-footer[hidden] { display: none; }
+  .fk-count { font-size: 11.5px; color: var(--text-muted); }
+  .fk-pages { display: flex; align-items: center; gap: 4px; }
+  .fk-page-btn {
+    display: flex; align-items: center; justify-content: center;
+    width: 24px; height: 24px;
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    color: var(--text-soft);
+    transition: all .1s;
+  }
+  .fk-page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
+  .fk-page-btn:disabled { opacity: .35; cursor: not-allowed; }
+  .fk-page-info { font-size: 11.5px; color: var(--text-muted); min-width: 40px; text-align: center; }
+
+  /* Clear row */
+  .fk-clear-row {
+    border-top: 1px solid var(--border-soft);
+    padding: 6px 10px;
+    background: var(--surface2);
+  }
+  .fk-clear-btn {
+    display: flex; align-items: center; gap: 5px;
+    background: none; border: none; cursor: pointer;
+    font-size: 12px; color: var(--text-muted);
+    font-family: inherit;
+    padding: 3px 6px;
+    border-radius: var(--radius-sm);
+    transition: color .1s, background .1s;
+  }
+  .fk-clear-btn:hover { color: var(--danger, #dc2626); background: var(--danger-soft, #fef2f2); }
+
+  .fieldset-heading {
+    font-size: 11.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: .6px;
+    color: var(--text-muted);
+    padding: 16px 0 10px;
+    border-bottom: 1px solid var(--border-soft);
+    margin-bottom: 2px;
+    grid-column: 1 / -1;
+  }
+
+/* ── List page ────────────────────────────────────────────── */
+  /* ── UI Menu (portal dropdown) ── */
+  .ui-menu { position: relative; display: inline-block; }
+
+  .ui-menu-panel {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    min-width: 150px;
+    overflow: hidden;
+  }
+
+  .ui-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    font-size: 13px;
+    color: var(--text-soft);
+    text-decoration: none;
+    background: none;
+    border: none;
+    width: 100%;
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background .1s;
+    white-space: nowrap;
+  }
+  .ui-menu-item:hover { background: var(--surface2); color: var(--text); }
+  .ui-menu-danger     { color: var(--danger); }
+  .ui-menu-danger:hover { background: var(--danger-bg); color: var(--danger); }
+
+  .ui-menu-sep { height: 1px; background: var(--border-soft); margin: 3px 0; }
+
+/* ═══════════════════════════════════════════════════════════════
+   TOGGLE SWITCH  (boolean / checkbox fields)
+   ═══════════════════════════════════════════════════════════════ */
+
+.toggle-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px 0;
+}
+
+.toggle-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Visually hidden but still in flow so the + sibling selector works reliably */
+.toggle-input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+}
+
+.toggle-track {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 24px;
+  border-radius: 99px;
+  background: var(--border);
+  transition: background .18s, box-shadow .18s;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+/* :checked state — the input and track are adjacent siblings inside the label */
+.toggle-input:checked ~ .toggle-track {
+  background: var(--primary);
+}
+
+.toggle-thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0,0,0,.25);
+  transition: transform .18s;
+  pointer-events: none;
+}
+
+.toggle-input:checked ~ .toggle-track .toggle-thumb {
+  transform: translateX(16px);
+}
+
+.toggle-label {
+  font-size: 13.5px;
+  color: var(--text-soft);
+  font-weight: 500;
+  line-height: 1;
+}
+
+/* Focus ring */
+.toggle-input:focus-visible ~ .toggle-track {
+  box-shadow: 0 0 0 3px var(--primary-soft);
+}
+
+/* Disabled state */
+.toggle-input:disabled ~ .toggle-track {
+  opacity: .5;
+  cursor: not-allowed;
+}
+.toggle-input:disabled ~ .toggle-label {
+  opacity: .5;
+}
+
+/* ─────────────────────────────────────────────────────────────────
+   Thin themed scrollbars
+   ───────────────────────────────────────────────────────────────── */
+
+/* Webkit (Chrome, Edge, Safari) */
+::-webkit-scrollbar {
+  width:  5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--primary-dim);
+  border-radius: 99px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--primary);
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--primary-dim) transparent;
+}
+*:hover {
+  scrollbar-color: var(--primary) transparent;
+}
+
+
+/* ─────────────────────────────────────────────────────────────────
+   FK cells — floating arrow button appears on cell hover
+   ───────────────────────────────────────────────────────────────── */
+
+/* The td needs position:relative — applied via the wrapper span signal */
+td:has(.fk-cell) {
+  position: relative;
+}
+
+.fk-cell {
+  display: block;
+  /* leave room so text never sits under the arrow */
+  padding-right: 24px;
+}
+
+.fk-arrow-btn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%) translateX(4px);
+  opacity: 0;
+  transition: opacity .12s ease, transform .12s ease;
+  color: var(--primary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+  background: var(--primary-soft);
+  border: 1px solid var(--primary-dim);
+  pointer-events: none;
+}
+
+/* Show on td hover */
+td:hover .fk-arrow-btn {
+  opacity: 1;
+  transform: translateY(-50%) translateX(0);
+  pointer-events: auto;
+}
+
+/* Detail page variant */
+.fk-cell-detail .fk-arrow-btn {
+  width: 24px;
+  height: 24px;
+}