diff --git a/admin/DashboardController.php b/admin/DashboardController.php index d82aad5..8697784 100644 --- a/admin/DashboardController.php +++ b/admin/DashboardController.php @@ -181,6 +181,7 @@ async function showRaw(id) { } function closeModal() { document.getElementById('modal').style.display = 'none'; } document.addEventListener('keydown', e => { if(e.key==='Escape') closeModal(); }); +window.addEventListener('pagehide', () => { es && es.close(); }); connect(); @@ -1252,7 +1253,7 @@ HTML; echo << body{overflow:hidden;height:100vh} - .chat-layout{display:flex;height:calc(100vh - 104px);overflow:hidden} + .chat-layout{display:flex;height:calc(100vh - 56px);overflow:hidden} .conv-sidebar{width:340px;min-width:340px;background:#fff;border-right:1px solid #eef1f5;display:flex;flex-direction:column;overflow:hidden} .conv-search{padding:14px 16px;border-bottom:1px solid #eef1f5} .conv-search input{width:100%;padding:9px 14px 9px 36px;border:1px solid #e2e5ea;border-radius:10px;font-size:13px;outline:none;background:#f5f7fb url('data:image/svg+xml,') 12px 50% no-repeat;background-size:16px;transition:all .15s} @@ -1681,7 +1682,7 @@ HTML; echo << .wrap{padding:24px;max-width:1100px;margin:0 auto} -.tabs{display:flex;gap:2px;margin-bottom:0;flex-wrap:wrap;position:sticky;top:104px;z-index:90;background:#f5f7fb;padding:10px 0 0} +.tabs{display:flex;gap:2px;margin-bottom:0;flex-wrap:wrap;position:sticky;top:56px;z-index:90;background:#f9fafb;padding:10px 0 0} .tab-btn{padding:10px 18px;border:none;border-radius:10px 10px 0 0;font-size:13px;font-weight:600;cursor:pointer;background:#e8ecf2;color:#5f6b7a;transition:all .15s} .tab-btn:hover{background:#dce1e8} .tab-btn.active{background:#fff;color:#0b3d91;box-shadow:0 -2px 4px rgba(0,0,0,.04)} diff --git a/admin/Layout.php b/admin/Layout.php index 63e244c..1fddb9a 100644 --- a/admin/Layout.php +++ b/admin/Layout.php @@ -8,6 +8,24 @@ class Layout return htmlspecialchars($v, ENT_QUOTES, 'UTF-8'); } + private static function icon(string $name): string + { + $s = 'width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"'; + $icons = [ + 'dashboard' => '', + 'live' => '', + 'chat' => '', + 'pending' => '', + 'companies' => '', + 'bot-config' => '', + 'conv-flow' => '', + 'settings' => '', + 'sync' => '', + 'send' => '', + ]; + return $icons[$name] ?? ''; + } + public static function open( string $title, string $active, @@ -19,39 +37,42 @@ class Layout $groups = [ [ - ['dashboard', '/admin/dashboard', 'πŸ“Š', 'Dashboard'], - ['live', '/admin/live', 'πŸ”΄', 'Live'], - ['chat', '/admin/chat', 'πŸ’¬', 'Chat'], + ['dashboard', '/admin/dashboard', 'dashboard', 'Dashboard'], + ['live', '/admin/live', 'live', 'Live'], + ['chat', '/admin/chat', 'chat', 'Chat'], ], [ - ['pending', '/admin/pending', '⏳', 'Pendientes', $pending], - ['companies', '/admin/companies', '🏒', 'Empresas'], + ['pending', '/admin/pending', 'pending', 'Pendientes', $pending], + ['companies', '/admin/companies', 'companies', 'Empresas'], ], [ - ['bot-config', '/admin/bot-config', 'πŸ€–', 'Bot'], - ['conv-flow', '/admin/conversation-flow', 'πŸ”—', 'Flujos'], - ['settings', '/admin/settings', 'βš™οΈ', 'Ajustes'], + ['bot-config', '/admin/bot-config', 'bot-config', 'Bot'], + ['conv-flow', '/admin/conversation-flow', 'conv-flow', 'Flujos'], + ['settings', '/admin/settings', 'settings', 'Ajustes'], ], ]; - $navHtml = ''; + $navLinks = ''; foreach ($groups as $gi => $group) { if ($gi > 0) { - $navHtml .= ''; + $navLinks .= ''; } foreach ($group as $item) { - [$key, $href, $icon, $label] = $item; + [$key, $href, $iconKey, $label] = $item; $badge = isset($item[4]) && $item[4] > 0 ? '' . (int)$item[4] . '' : ''; $cls = $active === $key ? ' active' : ''; - $navHtml .= "{$icon} {$label}{$badge}"; + $svg = self::icon($iconKey); + $navLinks .= "{$svg}{$label}{$badge}"; } } - $navHtml .= ''; - $navHtml .= 'πŸ”„'; - $navHtml .= 'πŸ“¨'; + $navLinks .= ''; + $navLinks .= '' . self::icon('sync') . ''; + $navLinks .= '' . self::icon('send') . ''; + + $initial = mb_strtoupper(mb_substr($userName, 0, 1, 'UTF-8'), 'UTF-8'); return << @@ -63,19 +84,63 @@ class Layout -
-
- -

Palmas360 {$t}

+ +
+
+ +
+ + Palmas360 +
+ + + +
+
+
{$initial}
+ {$u} +
+ Salir +
+
-
- 👤 {$u} - Salir +
+ + + - + + HTML; } } diff --git a/assets/app.css b/assets/app.css index 5304cf8..7fd3bbe 100644 --- a/assets/app.css +++ b/assets/app.css @@ -1,120 +1,154 @@ -/* ── Reset ─────────────────────────────────────────────────────────────── */ +/* ── Reset ────────────────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} -body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#f5f7fb;color:#1a1d23;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} +body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f9fafb;color:#111827;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} -/* ── Topbar ────────────────────────────────────────────────────────────── */ -.topbar{background:linear-gradient(135deg,#0a2e6e,#0b3d91,#1565c0);color:#fff;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.12)} -.topbar h1{font-size:15px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:8px} -.topbar small{font-size:11px;opacity:.8;display:block;margin-top:2px} -.topbar-r{display:flex;align-items:center;gap:10px} -.ubadge{background:rgba(255,255,255,.15);border-radius:20px;padding:4px 14px;font-size:12px;font-weight:500;backdrop-filter:blur(4px)} -.btn-out{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:6px 16px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;transition:all .15s;backdrop-filter:blur(4px)} -.btn-out:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.35)} +/* ── Single topbar ────────────────────────────────────────────────────── */ +.topbar{background:#fff;border-bottom:1px solid #e5e7eb;height:56px;position:sticky;top:0;z-index:100} +.topbar-inner{height:100%;max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:0} +.topbar-left{display:flex;align-items:center;gap:12px;flex-shrink:0;padding-right:24px} +.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto;padding-left:24px} -/* ── Nav ───────────────────────────────────────────────────────────────── */ -.nav-bar{background:#fff;padding:10px 28px;display:flex;gap:2px;flex-wrap:wrap;align-items:center;border-bottom:1px solid #eef1f5;box-shadow:0 1px 3px rgba(0,0,0,.04);position:sticky;top:56px;z-index:99} -.nav-link{padding:7px 14px;border-radius:10px;font-size:13px;font-weight:500;color:#5f6b7a;text-decoration:none;transition:all .2s ease;display:inline-flex;align-items:center;gap:5px;letter-spacing:.01em;white-space:nowrap} -.nav-link:hover{background:#f0f4ff;color:#0b3d91;transform:translateY(-1px)} -.nav-link.active{background:#0b3d91;color:#fff;box-shadow:0 2px 8px rgba(11,61,145,.25)} -.nav-link.nav-action{padding:7px 10px;font-size:15px} -.nav-sep{display:inline-block;width:1px;height:20px;background:#eef1f5;margin:0 6px;flex-shrink:0} -.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;border-radius:9px;background:#e74c3c;color:#fff;font-size:10px;font-weight:700;padding:0 4px;margin-left:3px} +/* Brand */ +.brand{font-size:15px;font-weight:400;color:#111827;text-decoration:none;letter-spacing:-.02em;white-space:nowrap} +.brand strong{font-weight:700} -/* ── Badges ────────────────────────────────────────────────────────────── */ -.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;gap:4px} -.badge-blue{background:#dbeafe;color:#1d4ed8} -.badge-green{background:#dcfce7;color:#166534} -.badge-teal{background:#ccfbf1;color:#0f766e} -.badge-red{background:#fee2e2;color:#991b1b} -.badge-gray{background:#f3f4f6;color:#6b7280} +/* User chip */ +.user-chip{display:flex;align-items:center;gap:8px} +.user-avatar{width:28px;height:28px;border-radius:50%;background:#111827;color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0} +.user-name{font-size:13px;color:#374151;font-weight:500} -/* ── Buttons ───────────────────────────────────────────────────────────── */ -.btn-primary{background:#0b3d91;color:#fff;border:none;border-radius:10px;padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .15s} -.btn-primary:hover{background:#1565c0;box-shadow:0 2px 8px rgba(11,61,145,.2)} -.btn-secondary{background:#f0f4ff;color:#0b3d91;border:1px solid #d6e4ff;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s;display:inline-flex;align-items:center;gap:4px} -.btn-secondary:hover{background:#dbeafe;border-color:#0b3d91} -.btn-sm{background:#f0f4ff;color:#0b3d91;border:1px solid #d6e4ff;border-radius:7px;padding:5px 13px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s;display:inline-flex;align-items:center;gap:4px} -.btn-sm:hover{background:#dbeafe;border-color:#0b3d91} -.btn-danger{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:7px;padding:5px 13px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s;display:inline-flex;align-items:center;gap:4px} -.btn-danger:hover{background:#fee2e2;border-color:#991b1b} -.btn-danger-sm{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s} -.btn-danger-sm:hover{background:#fee2e2} +/* Logout */ +.btn-out{background:#fff;color:#374151;border:1px solid #e5e7eb;border-radius:6px;padding:5px 14px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s;white-space:nowrap} +.btn-out:hover{background:#f9fafb;border-color:#d1d5db} -/* ── Card ──────────────────────────────────────────────────────────────── */ -.card{background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.03);overflow:hidden;border:1px solid #eef1f5} -.card-h{background:linear-gradient(135deg,#0b3d91,#1565c0);color:#fff;padding:14px 20px;font-size:14px;font-weight:700} -.card-b{padding:20px} +/* ── Desktop nav (inside topbar) ──────────────────────────────────────── */ +.topnav{display:flex;align-items:center;flex:1;height:100%;overflow-x:auto;scrollbar-width:none} +.topnav::-webkit-scrollbar{display:none} +.nav-link{height:56px;padding:0 10px;font-size:13px;font-weight:500;color:#6b7280;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .12s,border-color .12s;flex-shrink:0} +.nav-link svg{flex-shrink:0} +.nav-link:hover{color:#111827} +.nav-link.active{color:#111827;border-bottom-color:#111827;font-weight:600} +.nav-link.nav-action{border-bottom:none;height:32px;padding:0 8px;border-radius:6px;color:#9ca3af} +.nav-link.nav-action:hover{background:#f3f4f6;color:#374151} +.nav-sep{display:inline-block;width:1px;height:20px;background:#e5e7eb;margin:0 4px;flex-shrink:0;align-self:center} +.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:8px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;padding:0 4px;margin-left:2px} -/* ── Table ─────────────────────────────────────────────────────────────── */ -table{width:100%;border-collapse:separate;border-spacing:0} -thead{background:#f8f9fd} -th{padding:12px 16px;text-align:left;font-size:11px;font-weight:700;color:#0b3d91;text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid #e8eaf6} -td{padding:11px 16px;border-bottom:1px solid #f0f2f5;vertical-align:middle;font-size:13px} +/* ── Hamburger ────────────────────────────────────────────────────────── */ +.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:6px;border-radius:6px;transition:background .12s;flex-shrink:0} +.hamburger:hover{background:#f3f4f6} +.hamburger span{display:block;height:1.5px;background:#374151;border-radius:2px;transition:transform .22s,opacity .15s} +.hamburger.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} +.hamburger.active span:nth-child(2){opacity:0} +.hamburger.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} + +/* ── Mobile overlay ───────────────────────────────────────────────────── */ +.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199;backdrop-filter:blur(2px)} +.nav-overlay.show{display:block;animation:fadeIn .18s ease} +@keyframes fadeIn{from{opacity:0}to{opacity:1}} + +/* ── Mobile drawer ────────────────────────────────────────────────────── */ +.nav-drawer{display:none;position:fixed;top:0;left:-280px;width:280px;height:100dvh;background:#fff;z-index:200;flex-direction:column;transition:left .24s cubic-bezier(.4,0,.2,1);border-right:1px solid #e5e7eb} +.nav-drawer.open{left:0;box-shadow:20px 0 60px rgba(0,0,0,.1)} +.nav-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:56px;border-bottom:1px solid #f3f4f6;flex-shrink:0} +.drawer-close{background:none;border:none;color:#9ca3af;font-size:18px;cursor:pointer;padding:6px;border-radius:6px;transition:background .12s,color .12s;line-height:1} +.drawer-close:hover{background:#f3f4f6;color:#374151} +.nav-drawer-body{flex:1;overflow-y:auto;padding:10px} +.nav-drawer-footer{padding:14px 20px;border-top:1px solid #f3f4f6;display:flex;align-items:center;justify-content:space-between;flex-shrink:0} +.nav-drawer .nav-link{width:100%;height:42px;border-bottom:none;border-radius:8px;padding:0 12px;border-left:2px solid transparent} +.nav-drawer .nav-link:hover{background:#f9fafb;color:#111827} +.nav-drawer .nav-link.active{background:#f9fafb;color:#111827;border-left-color:#111827;font-weight:600} +.nav-drawer .nav-sep{width:100%;height:1px;display:block;margin:6px 0;align-self:auto} +.nav-drawer .nav-link.nav-action{border-left:none} + +/* ── Badges ───────────────────────────────────────────────────────────── */ +.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;gap:4px} +.badge-blue{background:#eff6ff;color:#1d4ed8;border:1px solid #dbeafe} +.badge-green{background:#f0fdf4;color:#166534;border:1px solid #dcfce7} +.badge-teal{background:#f0fdfa;color:#0f766e;border:1px solid #ccfbf1} +.badge-red{background:#fef2f2;color:#991b1b;border:1px solid #fee2e2} +.badge-gray{background:#f9fafb;color:#6b7280;border:1px solid #e5e7eb} + +/* ── Buttons ──────────────────────────────────────────────────────────── */ +.btn-primary{background:#111827;color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:background .12s} +.btn-primary:hover{background:#1f2937} +.btn-secondary{background:#fff;color:#374151;border:1px solid #e5e7eb;border-radius:6px;padding:7px 14px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:background .12s,border-color .12s} +.btn-secondary:hover{background:#f9fafb;border-color:#d1d5db} +.btn-sm{background:#fff;color:#374151;border:1px solid #e5e7eb;border-radius:6px;padding:5px 12px;font-size:12px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:background .12s} +.btn-sm:hover{background:#f9fafb} +.btn-danger{background:#fff;color:#b91c1c;border:1px solid #fecaca;border-radius:6px;padding:5px 12px;font-size:12px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:background .12s} +.btn-danger:hover{background:#fef2f2} +.btn-danger-sm{background:#fff;color:#b91c1c;border:1px solid #fecaca;border-radius:5px;padding:4px 10px;font-size:11px;font-weight:500;cursor:pointer;transition:background .12s} +.btn-danger-sm:hover{background:#fef2f2} + +/* ── Card ─────────────────────────────────────────────────────────────── */ +.card{background:#fff;border-radius:8px;border:1px solid #e5e7eb;overflow:hidden} +.card-h{border-bottom:1px solid #e5e7eb;padding:12px 16px;font-size:13px;font-weight:600;color:#111827} +.card-b{padding:16px} + +/* ── Table ────────────────────────────────────────────────────────────── */ +table{width:100%;border-collapse:collapse} +thead{background:#f9fafb} +th{padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid #e5e7eb} +td{padding:11px 14px;border-bottom:1px solid #f3f4f6;vertical-align:middle;font-size:13px;color:#374151} tr:last-child td{border-bottom:none} -tr:hover td{background:#f8faff} -.id-col{color:#a0a8b8;font-size:12px;white-space:nowrap;font-family:monospace} -.empty{text-align:center;padding:56px 24px;color:#a0a8b8;font-size:15px} -.empty a{color:#0b3d91;text-decoration:none;font-weight:600} -.empty a:hover{text-decoration:underline} +tr:hover td{background:#fafafa} +.id-col{color:#9ca3af;font-size:12px;white-space:nowrap;font-family:ui-monospace,monospace} +.empty{text-align:center;padding:48px 24px;color:#9ca3af;font-size:14px} +.empty a{color:#374151;text-decoration:underline} -/* ── Modal ─────────────────────────────────────────────────────────────── */ -.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)} -.mc{background:#fff;border-radius:14px;width:100%;max-width:740px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.2)} -.mh{background:linear-gradient(135deg,#0a2e6e,#0b3d91);color:#fff;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px} -.mx{background:none;border:none;color:rgba(255,255,255,.7);font-size:22px;cursor:pointer;line-height:1;padding:0 4px;transition:color .15s} -.mx:hover{color:#fff} +/* ── Modal ────────────────────────────────────────────────────────────── */ +.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999;align-items:center;justify-content:center;padding:16px} +.mc{background:#fff;border-radius:10px;width:100%;max-width:720px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid #e5e7eb;box-shadow:0 20px 60px rgba(0,0,0,.15)} +.mh{border-bottom:1px solid #e5e7eb;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:#111827} +.mx{background:none;border:none;color:#9ca3af;font-size:20px;cursor:pointer;line-height:1;padding:0 4px;transition:color .12s} +.mx:hover{color:#374151} .mb{padding:20px;overflow-y:auto;flex:1} -/* ── Code / Pre ────────────────────────────────────────────────────────── */ -pre{background:#1a1d23;color:#e4e7ed;padding:20px;border-radius:10px;font-size:12px;line-height:1.7;overflow-x:auto;white-space:pre-wrap;word-break:break-all;font-family:'SF Mono',Monaco,monospace} -code{background:#f3f4f6;padding:2px 6px;border-radius:5px;font-size:12px;color:#3d4552;font-family:'SF Mono',Monaco,monospace} +/* ── Code / Pre ───────────────────────────────────────────────────────── */ +pre{background:#111827;color:#e5e7eb;padding:18px;border-radius:8px;font-size:12px;line-height:1.7;overflow-x:auto;white-space:pre-wrap;word-break:break-all;font-family:ui-monospace,'SF Mono',monospace} +code{background:#f3f4f6;padding:2px 5px;border-radius:4px;font-size:12px;color:#374151;font-family:ui-monospace,monospace} -/* ── Toast ─────────────────────────────────────────────────────────────── */ -.toast{padding:12px 18px;border-radius:10px;font-size:13px;font-weight:600;margin-bottom:16px;text-align:center} -.toast-success{background:#dcfce7;color:#166534;border:1px solid #a3e4bc} -.toast-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca} +/* ── Toast ────────────────────────────────────────────────────────────── */ +.toast{padding:10px 16px;border-radius:6px;font-size:13px;font-weight:500;margin-bottom:16px} +.toast-success{background:#f0fdf4;color:#166534;border:1px solid #dcfce7} +.toast-error{background:#fef2f2;color:#991b1b;border:1px solid #fee2e2} -/* ── Container ─────────────────────────────────────────────────────────── */ -.wrap{padding:24px;margin:0 auto} +/* ── Container ────────────────────────────────────────────────────────── */ +.wrap{padding:24px;max-width:1280px;margin:0 auto} -/* ── Form ──────────────────────────────────────────────────────────────── */ +/* ── Form ─────────────────────────────────────────────────────────────── */ .form-group{margin-bottom:14px} -.form-group label{display:block;font-size:13px;font-weight:600;color:#3d4552;margin-bottom:5px} -.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:1px solid #e2e5ea;border-radius:8px;font-size:13px;outline:none;font-family:inherit;background:#fafbfc;transition:all .15s;color:#1a1d23} -.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#1565c0;background:#fff;box-shadow:0 0 0 3px rgba(21,101,192,.08)} -.form-group .hint{font-size:11px;color:#7a8291;margin-top:4px} -.form-row{display:flex;gap:16px;flex-wrap:wrap} +.form-group label{display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:5px} +.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;outline:none;font-family:inherit;background:#fff;transition:border-color .12s,box-shadow .12s;color:#111827} +.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#6b7280;box-shadow:0 0 0 3px rgba(107,114,128,.1)} +.form-group .hint{font-size:11px;color:#9ca3af;margin-top:4px} +.form-row{display:flex;gap:14px;flex-wrap:wrap} .form-row .form-group{flex:1;min-width:200px} -.form-group.checkbox{display:flex;align-items:center;gap:10px;padding:6px 0;margin-bottom:8px} -.form-group.checkbox input[type=checkbox]{width:16px;height:16px;accent-color:#0b3d91} -.form-group.checkbox label{margin:0;cursor:pointer;font-size:13px;color:#3d4552;font-weight:500} +.form-group.checkbox{display:flex;align-items:center;gap:8px;padding:4px 0;margin-bottom:8px} +.form-group.checkbox input[type=checkbox]{width:15px;height:15px;accent-color:#111827} +.form-group.checkbox label{margin:0;cursor:pointer;font-size:13px;color:#374151} -/* ── Tags ──────────────────────────────────────────────────────────────── */ -.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;gap:4px} -.tag-hybrid{background:#f0f4ff;color:#0b3d91;border:1px solid #d6e4ff} -.tag-ai{background:#e8f8f0;color:#1e8449;border:1px solid #a3e4bc} -.tag-normal{background:#fef5e7;color:#b85e0e;border:1px solid #f9e79f} -.tag-yes,.tag-off{background:#fee2e2;color:#991b1b;border:1px solid #fecaca} -.tag-no,.tag-on{background:#dcfce7;color:#166534;border:1px solid #a3e4bc} +/* ── Tags ─────────────────────────────────────────────────────────────── */ +.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;gap:4px} +.tag-hybrid{background:#eff6ff;color:#1d4ed8;border:1px solid #dbeafe} +.tag-ai{background:#f0fdf4;color:#166534;border:1px solid #dcfce7} +.tag-normal{background:#fffbeb;color:#92400e;border:1px solid #fde68a} +.tag-yes,.tag-off{background:#fef2f2;color:#991b1b;border:1px solid #fecaca} +.tag-no,.tag-on{background:#f0fdf4;color:#166534;border:1px solid #dcfce7} -/* ── Result card (sync/queue pages) ───────────────────────────────────── */ -.result-card{background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.03);padding:32px;border:1px solid #eef1f5} -.result-icon{font-size:52px;text-align:center;margin-bottom:16px;line-height:1} -.result-title{font-size:18px;font-weight:700;text-align:center;margin-bottom:24px} +/* ── Result card ──────────────────────────────────────────────────────── */ +.result-card{background:#fff;border-radius:8px;border:1px solid #e5e7eb;padding:32px} +.result-icon{font-size:48px;text-align:center;margin-bottom:14px;line-height:1} +.result-title{font-size:17px;font-weight:600;text-align:center;margin-bottom:20px} .result-title.success{color:#166534} .result-title.error{color:#991b1b} -/* ── Hamburger ─────────────────────────────────────────────────────────── */ -.nav-hamburger{display:none;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;line-height:1;transition:background .15s} -.nav-hamburger:hover{background:rgba(255,255,255,.15)} - -/* ── Responsive ────────────────────────────────────────────────────────── */ -@media(max-width:768px){ - .topbar{padding:10px 16px} - .nav-bar{padding:8px 12px;top:52px;flex-direction:column;align-items:flex-start;gap:0;max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:max-height .25s ease,padding .2s ease;position:static} - .nav-bar.open{max-height:600px;padding:8px 12px} - .nav-hamburger{display:inline-flex} - .nav-link{width:100%;padding:10px 12px;border-radius:8px} - .nav-sep{display:block;width:100%;height:1px;margin:4px 0} - .wrap{padding:12px} +/* ── Responsive ───────────────────────────────────────────────────────── */ +@media(max-width:900px){ + .topbar-inner{padding:0 16px} + .hamburger{display:flex} + .topnav{display:none} + .user-name{display:none} + .nav-drawer{display:flex} + .wrap{padding:14px} }