:root{--primary:#0ea5e9;--secondary:#10b981;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--light:#f8fafc;--dark:#111827} *{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f3f4f6;color:#111827} /* Added position: relative for mobile overlay */ .app-shell{display:flex;min-height:100vh; position: relative;} .sidebar{ width:250px; /* Default desktop open width */ background:#fff; border-right:1px solid #e5e7eb; padding:1rem; position:sticky; top:0; height:100vh; /* Added transitions for smoothness */ transition: width 0.3s ease, padding 0.3s ease, transform 0.3s ease; overflow-x: hidden; white-space: nowrap; z-index: 10; } /* Added transitions for smooth hide/show */ .brand{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-weight:700; transition: opacity 0.3s linear, visibility 0.3s;} .brand .logo{width:45px;height:45px;object-fit:contain} /* Added transitions for smooth hide/show */ nav { transition: opacity 0.3s linear, visibility 0.3s; } nav ul{list-style:none;margin:0;padding:0}nav a{display:block;padding:.6rem .8rem;border-radius:.5rem;text-decoration:none;color:#111827}nav a:hover{background:var(--light)} nav .sep{border-top:1px dashed #e5e7eb;margin:.6rem 0} .content{ flex:1; padding:1rem 1rem; transition: margin-left 0.3s ease; } /* --- Added Toggle Button Styles --- */ /* You will need to add this button to your HTML, ideally just inside the or .app-shell tag. */ #sidebarToggle { display: none; /* Hidden on desktop, shown on mobile */ position: fixed; top: 1rem; left: 1rem; z-index: 110; /* Above sidebar */ background: var(--primary); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 0.3rem 0.6rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* Default icon: Hamburger */ #sidebarToggle::before { content: '\2630'; } /* Icon when open: X */ #sidebarToggle.open::before { content: '\00D7'; } /* --- End Toggle Button Styles --- */ .card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1rem;margin-bottom:1rem;box-shadow:0 1px 1px rgba(0,0,0,.02)} .row{display:flex;gap:1rem;flex-wrap:wrap}.col{flex:1 1 260px} .btn{display:inline-block;padding:.55rem .9rem;border-radius:10px;border:1px solid transparent;text-decoration:none;cursor:pointer} .btn-primary{background:var(--primary);color:#fff}.btn-success{background:var(--success);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-outline{background:#fff;border-color:#e5e7eb} .table{width:100%;border-collapse:collapse}.table th,.table td{padding:.6rem;border-bottom:1px solid #efefef;text-align:left} .badge{display:inline-block;padding:.25rem .5rem;border-radius:999px;font-size:.8rem}.badge-success{background:#e8f7ee;color:#166534}.badge-warning{background:#fff7e6;color:#a16207} .stat{display:flex;align-items:center;justify-content:space-between} .muted{color:#6b7280;font-size:.9rem} form label{display:block;font-weight:600;margin:.4rem 0 .2rem} form input[type=text],form input[type=password],form input[type=date], form select, form textarea, form input[type=number]{width:100%;padding:.6rem;border:1px solid #e5e7eb;border-radius:10px} .toast-container{position:fixed;top:1rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem} .toast{background:#fff;border:1px solid #e5e7eb;border-left:4px solid var(--primary);padding:.6rem .8rem;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.05);min-width:260px} .toast.success{border-left-color:var(--success)}.toast.error{border-left-color:var(--danger)}.toast.warning{border-left-color:var(--warning)}.toast.info{border-left-color:var(--primary)} .table-actions{display:flex;gap:.4rem} /* --- NEW: Flexible Dashboard Grid System --- */ /* This new grid replaces the old grid-4/grid-6 system */ /* It's a flex-wrap grid, which is responsive by default */ .grid { display: flex; flex-flow: row wrap; /* Wrap elements to next line */ gap: 1rem; /* Space between cards */ margin-bottom: 1rem; /* Space between grid rows */ } /* Base size for all stat cards */ .grid > .stat-card { flex: 1 1 200px; /* Grow, shrink, base width 200px */ background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem; box-shadow: 0 1px 1px rgba(0,0,0,.02); display: flex; flex-direction: column; /* Stack content vertically */ justify-content: space-between; gap: 0.5rem; /* Space between text and button */ } /* Stat card content styling */ .stat-card .value { font-size: 1.8rem; font-weight: 700; line-height: 1.2; } /* Stat card with a button */ .stat-card .stat-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }