:root{ --primary:#4f46e5; --primary-hover:#4338ca; /* Light Mode Tokens */ --bg-base:#f3f4f6; --bg-surface:#ffffff; --border-color:#e5e7eb; --text-main:#111827; --text-muted:#6b7280; --shadow:0 4px 6px -1px rgba(0,0,0,0.05),0 2px 4px -1px rgba(0,0,0,0.03); /* Accent & Interactions */ --hover-bg:#f9fafb; --ring:rgba(79,70,229,0.2); } [data-theme="dark"]{ --bg-base:#0f172a; --bg-surface:#1e293b; --border-color:#334155; --text-main:#f8fafc; --text-muted:#94a3b8; --shadow:0 4px 6px -1px rgba(0,0,0,0.3),0 2px 4px -1px rgba(0,0,0,0.2); --hover-bg:#334155; } *{ box-sizing:border-box; margin:0; padding:0; } body{ font-family:'Inter',system-ui,sans-serif; background-color:var(--bg-base); color:var(--text-main); display:flex; height:100vh; overflow:hidden; transition:background-color 0.3s ease,color 0.3s ease; } /* Shell Layout */ .sidebar{ width:240px; background-color:var(--bg-surface); border-right:1px solid var(--border-color); padding:1rem; display:flex; flex-direction:column; transition:background-color 0.3s ease; z-index:10; } .sidebar .logo{ font-size:1.25rem; font-weight:800; background:linear-gradient(135deg,#4f46e5,#ec4899); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:1.5rem; text-align:center; letter-spacing:-0.025em; } .nav-links{ display:flex; flex-direction:column; gap:0.15rem; flex-grow:1; overflow-y:auto; overflow-x:hidden; padding-right:0.5rem; } .nav-section-title{ font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); margin:1.5rem 0 0.5rem 0.5rem; opacity:0.7; } .nav-link{ text-decoration:none; padding:0.4rem 0.75rem; border-radius:6px; color:var(--text-muted); font-weight:500; font-size:0.85rem; transition:all 0.2s ease; display:flex; align-items:center; gap:0.5rem; letter-spacing:0.01em; -webkit-font-smoothing:antialiased; } .nav-link svg,.nav-link i{ width:16px; height:16px; stroke-width:2.5px; opacity:0.8; } .nav-link:hover,.nav-link.active{ background-color:var(--hover-bg); color:var(--text-main); } .nav-link:hover svg,.nav-link.active svg{ opacity:1; color:var(--primary); } /* Slide Over Panel */ .slide-over-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:40; opacity:0; pointer-events:none; transition:opacity 0.3s ease; } .slide-over-overlay.open{ opacity:1; pointer-events:auto; } .slide-over{ position:fixed; right:-450px; top:0; bottom:0; width:450px; background:var(--bg-surface); z-index:50; box-shadow:-4px 0 25px rgba(0,0,0,0.1); transition:right 0.3s ease; display:flex; flex-direction:column; } .slide-over.open{ right:0; } .slide-over-header{ padding:1.5rem; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; } .slide-over-content{ padding:1.5rem; flex-grow:1; overflow-y:auto; } .close-btn{ background:none; border:none; cursor:pointer; color:var(--text-muted); padding:0.5rem; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background 0.2s; } .close-btn:hover{ background:var(--hover-bg); color:var(--text-main); } .content-wrapper{ flex-grow:1; display:flex; flex-direction:column; } .topbar{ height:70px; background-color:var(--bg-surface); border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:flex-end; padding:0 2rem; } .main-content{ padding:0; overflow-y:auto; flex:1; } /* Components */ .card{ background-color:var(--bg-surface); border-radius:12px; border:1px solid var(--border-color); padding:1.5rem; box-shadow:var(--shadow); transition:background-color 0.3s ease; } .btn{ padding:0.5rem 1rem; border-radius:6px; font-weight:500; cursor:pointer; border:none; transition:all 0.2s; } .btn-primary{ background-color:var(--primary); color:white; } .btn-primary:hover{ background-color:var(--primary-hover); transform:translateY(-1px); box-shadow:0 4px 12px var(--ring); } .btn-toggle{ background:transparent; border:1px solid var(--border-color); color:var(--text-main); display:flex; align-items:center; gap:0.5rem; } /* DataGrid */ .table-wrapper{ width:100%; overflow-x:auto; margin-top:1rem; } table{ width:100%; border-collapse:collapse; text-align:left; } th{ padding:0.5rem 0.75rem; color:var(--text-muted); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid var(--border-color); } th a{ color:inherit; text-decoration:none; display:flex; align-items:center; gap:0.25rem; } th a:hover{ color:var(--primary); } td{ padding:0.5rem 0.75rem; font-size:0.875rem; border-bottom:1px solid var(--border-color); } tr:hover{ background-color:var(--hover-bg); } /* DataGrid Controls */ .datagrid-controls{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; gap:1rem; flex-wrap:wrap; } .datagrid-search{ display:flex; align-items:center; background:var(--bg-surface); border:1px solid var(--border-color); border-radius:6px; padding:0 0.5rem; width:300px; } .datagrid-search input{ border:none; background:transparent; padding:0.5rem; width:100%; color:var(--text-main); font-size:0.875rem; } .datagrid-search input:focus{ outline:none; } .datagrid-filters select{ padding:0.5rem; border-radius:6px; border:1px solid var(--border-color); background:var(--bg-surface); color:var(--text-main); font-size:0.875rem; outline:none; } /* Pagination */ .pagination{ display:flex; align-items:center; justify-content:flex-end; gap:0.5rem; margin-top:1rem; } .pagination .page-btn{ padding:0.25rem 0.75rem; font-size:0.875rem; border-radius:6px; border:1px solid var(--border-color); background:var(--bg-surface); color:var(--text-main); text-decoration:none; transition:background 0.2s; } .pagination .page-btn:hover:not(:disabled){ background:var(--hover-bg); } .pagination .page-btn.active{ background:var(--primary); color:white; border-color:var(--primary); } .pagination .page-info{ color:var(--text-muted); font-size:0.875rem; margin-right:1rem; } /* Forms */ .form-group{ margin-bottom:1.25rem; } .form-label{ display:block; margin-bottom:0.5rem; font-size:0.875rem; font-weight:500; color:var(--text-muted); } .form-input{ width:100%; padding:0.75rem 1rem; border-radius:8px; border:1px solid var(--border-color); background-color:var(--bg-surface); color:var(--text-main); transition:all 0.2s ease; } .form-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); }