/* style.css */ :root { --sidebar-width: 220px; --sidebar-collapsed: 60px; --sidebar-bg: #1a1d21; --sidebar-hover: #2c3038; --sidebar-text: #a0a4ab; --sidebar-active: #fff; --sidebar-brand: #fff; --content-bg: #f5f6fa; --card-bg: #fff; --transition-speed: 0.2s; } /* Sidebar */ .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: var(--sidebar-width); background-color: var(--sidebar-bg); display: flex; flex-direction: column; transition: width var(--transition-speed) ease; z-index: 1000; overflow: hidden; } .sidebar.collapsed { width: var(--sidebar-collapsed); } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); min-height: 60px; } .sidebar-brand { color: var(--sidebar-brand); text-decoration: none; font-size: 1.1rem; font-weight: 600; white-space: nowrap; overflow: hidden; } .sidebar-brand:hover { color: var(--sidebar-brand); } .brand-mini { display: none; } .sidebar.collapsed .brand-full { display: none; } .sidebar.collapsed .brand-mini { display: inline; } .sidebar-toggle-btn { background: none; border: none; color: var(--sidebar-text); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; border-radius: 4px; flex-shrink: 0; } .sidebar-toggle-btn:hover { color: var(--sidebar-active); background-color: var(--sidebar-hover); } .sidebar.collapsed .sidebar-toggle-btn { margin: 0 auto; } .sidebar.collapsed .sidebar-header { flex-direction: column; gap: 8px; padding: 12px 8px; } /* Nav items */ .sidebar-nav { list-style: none; padding: 8px 0; margin: 0; flex: 1; } .sidebar-nav li a, .sidebar-footer a { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--sidebar-text); text-decoration: none; white-space: nowrap; transition: background-color var(--transition-speed), color var(--transition-speed); } .sidebar-nav li a:hover, .sidebar-footer a:hover { background-color: var(--sidebar-hover); color: var(--sidebar-active); } .sidebar-nav li a i, .sidebar-footer a i { font-size: 1.15rem; width: 28px; text-align: center; flex-shrink: 0; } .sidebar.collapsed .nav-text { display: none; } .sidebar.collapsed .sidebar-nav li a, .sidebar.collapsed .sidebar-footer a { justify-content: center; padding: 10px 0; } /* Sidebar divider */ .sidebar-divider { border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 8px 16px; } .sidebar.collapsed .sidebar-divider { margin: 8px; } /* Submenu */ .submenu-toggle { position: relative; } .submenu-arrow { margin-left: auto; font-size: 0.75rem; transition: transform 0.2s; } .submenu-toggle.open .submenu-arrow { transform: rotate(180deg); } .submenu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.2s ease; } .submenu.open { max-height: 400px; } .submenu li a { padding-left: 28px; font-size: 0.9rem; } .sidebar.collapsed .submenu li a { padding-left: 0; } .sidebar.collapsed .submenu-arrow { display: none; } /* Footer (logout) */ .sidebar-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 8px 0; } /* Main content */ .main-content { margin-left: var(--sidebar-width); min-height: 100vh; background-color: var(--content-bg); transition: margin-left var(--transition-speed) ease; } .main-content.expanded { margin-left: var(--sidebar-collapsed); } /* Instant state from class — prevents flash on page load */ html.sidebar-is-collapsed .sidebar { width: var(--sidebar-collapsed); } html.sidebar-is-collapsed .sidebar .brand-full { display: none; } html.sidebar-is-collapsed .sidebar .brand-mini { display: inline; } html.sidebar-is-collapsed .sidebar .nav-text { display: none; } html.sidebar-is-collapsed .sidebar .sidebar-nav li a, html.sidebar-is-collapsed .sidebar .sidebar-footer a { justify-content: center; padding: 10px 0; } html.sidebar-is-collapsed .sidebar .sidebar-header { flex-direction: column; gap: 8px; padding: 12px 8px; } html.sidebar-is-collapsed .sidebar .sidebar-toggle-btn { margin: 0 auto; } html.sidebar-is-collapsed .main-content { margin-left: var(--sidebar-collapsed); } html.admin-menu-is-open .submenu#admin-submenu { max-height: 400px; } html.admin-menu-is-open .submenu-toggle#admin-menu-toggle .submenu-arrow { transform: rotate(180deg); } .content-wrapper { padding: 24px; } /* Cards / containers */ .content-card { background-color: var(--card-bg); border: 1px solid #e0e2e8; border-radius: 8px; padding: 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .edl-card { display: flex; flex-direction: column; min-height: calc(100vh - 72px); } .edl-card > h3 { flex-shrink: 0; } .edl-card .table-responsive, .edl-card > table { flex: 0 1 auto; } .edl-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid #e0e2e8; } /* Tables */ .table-resizable { table-layout: fixed; width: 100%; } .table { margin-bottom: 0; } .table th { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6c757d; border-bottom-width: 1px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; } .table td { vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table tbody.align-top td { vertical-align: top; } td.cell-wrap { white-space: normal; } /* Activity log table */ .log-table-wrapper { overflow-x: auto; } .log-table { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.8rem; table-layout: fixed; width: 100%; } .log-table td, .log-table th { padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Fixed column widths for log table */ .log-table th:nth-child(1), .log-table td:nth-child(1) { width: 160px; } /* Timestamp */ .log-table th:nth-child(2), .log-table td:nth-child(2) { width: 160px; } /* User */ .log-table th:nth-child(3), .log-table td:nth-child(3) { width: 100px; } /* Action */ .log-table th:nth-child(4), .log-table td:nth-child(4) { width: 150px; } /* Target */ .log-table th:nth-child(5), .log-table td:nth-child(5) { width: auto; } /* Detail - takes remaining space */ .log-table th:nth-child(6), .log-table td:nth-child(6) { width: 120px; } /* IP Address */ .log-table .badge { font-family: inherit; font-size: 0.75rem; } /* Column resize handle */ .col-resize-handle { position: absolute; right: 0; top: 25%; height: 50%; width: 3px; cursor: col-resize; background-color: rgba(0, 0, 0, 0.12); border-radius: 2px; transition: background-color 0.15s, width 0.15s; } .col-resize-handle:hover, .col-resize-handle.active { width: 4px; background-color: rgba(0, 0, 0, 0.35); } /* Action icons */ .actions-column { width: 200px; position: relative; } .actions-row { display: inline-flex; align-items: center; gap: 6px; } .copy-confirmation { position: absolute; font-size: 0.75rem; color: #198754; margin-left: 4px; } .icon { width: 18px; height: 18px; vertical-align: middle; opacity: 0.6; transition: opacity 0.15s; } .icon:hover { opacity: 1; } .action-items { cursor: pointer; font-size: 1.1rem; vertical-align: middle; line-height: 1; } /* Forms */ .form-group label { font-weight: 600; } /* API key blur */ .blur-text { filter: blur(5px); user-select: none; } .unblur-text { filter: none; user-select: all; } /* Buttons */ .btn { border-radius: 6px; } /* Badge */ .badge.bg-danger.icon-circle { display: inline-block; border-radius: 50%; text-align: center; line-height: 10px; background-color: red; color: white; } /* Login page */ .login-container { max-width: 400px; margin: 80px auto; } /* Pagination */ .pagination { margin-bottom: 0; } /* Mobile */ @media (max-width: 768px) { .sidebar { width: var(--sidebar-collapsed); } .sidebar .brand-full { display: none; } .sidebar .brand-mini { display: inline; } .sidebar .nav-text { display: none; } .sidebar .sidebar-nav li a, .sidebar .sidebar-footer a { justify-content: center; padding: 10px 0; } .sidebar .sidebar-header { flex-direction: column; gap: 8px; padding: 12px 8px; } .sidebar .sidebar-toggle-btn { margin: 0 auto; } .main-content { margin-left: var(--sidebar-collapsed); } }