/* SORT Admin Panel — styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--green: #1c3829; --green2: #2e7d32; --gl: #d6edd9; --gp: #f0f8f0;
--red: #c62828; --rl: #fce4e4; --amber: #b45309; --al: #fef3cd;
--blue: #0d4480; --bl: #ddeeff; --purple: #4527a0;
--text: #1a1a18; --muted: #7a7870; --faint: #9e9b8f;
--border: #e8e7e0; --bg: #f5f4f0; --white: #fff;
--sidebar: 220px;
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
/* ── Shell ── */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar); background: #0e1f16; flex-shrink: 0; display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; overflow-y: auto; }
.content { margin-left: var(--sidebar); flex: 1; min-height: 100vh; display: flex; flex-direction: column; }
/* ── Sidebar ── */
.sidebar-brand { padding: 20px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-logo { font-size: 22px; font-weight: 700; color: #e8f5e9; letter-spacing: .1em; }
.sidebar-sub { font-size: 10px; color: #7dab8a; margin-top: 2px; }
.nav-group { padding: 16px 10px 4px; font-size: 9px; font-weight: 600; color: rgba(232,245,233,.3); text-transform: uppercase; letter-spacing: .1em; }
.nav-link { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: rgba(232,245,233,.6); cursor: pointer; transition: all .1s; margin: 1px 8px; text-decoration: none; }
.nav-link:hover { background: rgba(255,255,255,.07); color: #e8f5e9; }
.nav-link.active { background: rgba(255,255,255,.14); color: #e8f5e9; font-weight: 500; }
.nav-link .icon { font-size: 16px; flex-shrink: 0; }
.sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.admin-badge { font-size: 11px; color: #7dab8a; padding: 6px 10px; }
.logout-btn { width: 100%; background: none; border: 1px solid rgba(255,255,255,.15); border-radius: 7px; padding: 8px; font-size: 12px; color: rgba(232,245,233,.6); cursor: pointer; font-family: inherit; transition: all .1s; }
.logout-btn:hover { background: rgba(255,255,255,.07); color: #e8f5e9; }
/* ── Top bar ── */
.topbar { background: var(--white); border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
.topbar-title { font-size: 18px; font-weight: 600; color: var(--text); }
.topbar-bc { font-size: 12px; color: var(--faint); margin-top: 2px; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
/* ── Main area ── */
.main { padding: 24px; flex: 1; }
/* ── Cards ── */
.card { background: var(--white); border-radius: 12px; border: 1px solid var(--border); padding: 20px; margin-bottom: 16px; }
.card-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-title span { color: var(--faint); font-size: 12px; font-weight: 400; }
/* ── Stat grid ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-box { background: var(--white); border-radius: 10px; border: 1px solid var(--border); padding: 16px; text-align: center; }
.stat-n { font-size: 28px; font-weight: 600; color: var(--green); letter-spacing: -.02em; }
.stat-l { font-size: 11px; color: var(--faint); margin-top: 3px; text-transform: uppercase; letter-spacing: .05em; }
/* ── Table ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { padding: 10px 12px; text-align: left; font-size: 10px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid var(--border); background: var(--bg); }
tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
tbody tr:hover { background: var(--bg); }
tbody td { padding: 11px 12px; color: var(--text); vertical-align: middle; }
tbody tr:last-child { border-bottom: none; }
/* ── Badges ── */
.badge { display: inline-flex; align-items: center; font-size: 10px; padding: 3px 8px; border-radius: 12px; font-weight: 600; }
.badge-green { background: var(--gl); color: #1c5c2a; }
.badge-red { background: var(--rl); color: var(--red); }
.badge-amber { background: var(--al); color: var(--amber); }
.badge-blue { background: var(--bl); color: var(--blue); }
.badge-gray { background: #ece9e0; color: #5a5750; }
.badge-purple { background: #ede8f8; color: var(--purple); }
/* ── Buttons ── */
.btn { border: none; border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: opacity .15s; }
.btn:hover { opacity: .85; }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--green); color: #fff; }
.btn-danger { background: var(--red); color: #fff; }
.btn-outline { background: var(--white); color: var(--text); border: 1px solid var(--border); }
.btn-small { padding: 5px 11px; font-size: 11px; }
.btn-amber { background: var(--amber); color: #fff; }
.btn-purple { background: var(--purple); color: #fff; }
/* ── Forms ── */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 11px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.form-input { width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font-size: 13px; color: var(--text); font-family: inherit; outline: none; transition: border .15s; background: var(--white); }
.form-input:focus { border-color: var(--green); }
.form-select { width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font-size: 13px; color: var(--text); font-family: inherit; background: var(--white); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-hint { font-size: 11px; color: var(--faint); margin-top: 4px; }
/* ── Search bar ── */
.search-bar { display: flex; gap: 10px; margin-bottom: 16px; }
.search-input { flex: 1; border: 1px solid var(--border); border-radius: 9px; padding: 9px 13px; font-size: 13px; font-family: inherit; outline: none; transition: border .15s; }
.search-input:focus { border-color: var(--green); }
/* ── Modal ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--white); border-radius: 16px; padding: 28px; width: 100%; max-width: 480px; box-shadow: 0 24px 60px rgba(0,0,0,.2); }
.modal-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
/* ── Alert ── */
.alert { border-radius: 9px; padding: 11px 14px; font-size: 13px; margin-bottom: 14px; }
.alert-success { background: var(--gl); color: #1c5c2a; }
.alert-error { background: var(--rl); color: var(--red); }
.alert-amber { background: var(--al); color: var(--amber); }
.alert-info { background: var(--bl); color: var(--blue); }
/* ── User avatar ── */
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
.user-cell { display: flex; align-items: center; gap: 10px; }
.user-name { font-weight: 500; }
.user-email { font-size: 11px; color: var(--faint); }
/* ── Activity timeline ── */
.timeline { list-style: none; }
.timeline li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.timeline li:last-child { border-bottom: none; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.tl-body { flex: 1; }
.tl-title { font-size: 13px; color: var(--text); }
.tl-meta { font-size: 11px; color: var(--faint); margin-top: 2px; }
/* ── Misc ── */
.section-label { font-size: 10px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; margin: 16px 0 8px; }
.empty-state { text-align: center; padding: 40px; color: var(--faint); }
.empty-state .icon { font-size: 40px; margin-bottom: 12px; }
.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--green); border-radius: 3px; }
.text-muted { color: var(--faint); }
.text-green { color: var(--green); font-weight: 600; }
.text-red { color: var(--red); }
.d-flex { display: flex; }
.align-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.ml-auto { margin-left: auto; }
.mt-4 { margin-top: 4px; }
/* ── Hamburger (hidden on desktop) ── */
.hamburger { display: none; align-items: center; justify-content: center; background: none; border: none; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; color: var(--text); font-size: 20px; flex-shrink: 0; }
.hamburger:hover { background: var(--bg); }
/* ── Sidebar overlay (mobile only) ── */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; }
.sidebar-overlay.open { display: block; }
/* ── Responsive — tablet & mobile ── */
@media (max-width: 900px) {
:root { --sidebar: 200px; }
.main { padding: 16px; }
.topbar { padding: 12px 16px; }
}
@media (max-width: 767px) {
/* Show hamburger */
.hamburger { display: flex; }
/* Sidebar: slide completely off-screen to the left.
!important needed to override the base left:0 on position:fixed.
transform avoided — buggy on iOS Safari with position:fixed. */
.sidebar {
left: -280px !important;
transition: left .25s ease;
z-index: 200;
box-shadow: none;
}
.sidebar.open {
left: 0 !important;
box-shadow: 4px 0 20px rgba(0,0,0,.4);
}
/* Content takes full width */
.content { margin-left: 0 !important; }
/* Tighter spacing */
.main { padding: 12px; }
.topbar { padding: 10px 12px; gap: 8px; }
.topbar-title { font-size: 15px; }
.card { padding: 14px; }
/* Stack form rows */
.form-row { grid-template-columns: 1fr; gap: 0; }
/* Tables scroll horizontally */
.table-wrap { -webkit-overflow-scrolling: touch; }
thead th, tbody td { padding: 8px 10px; font-size: 12px; }
/* Modals sheet up from bottom */
.modal-overlay { align-items: flex-end; padding: 0; }
.modal {
border-radius: 20px 20px 0 0;
max-width: 100%;
max-height: 92vh;
overflow-y: auto;
padding: 20px 16px 32px;
}
.modal::before {
content: '';
display: block;
width: 40px;
height: 4px;
background: var(--border);
border-radius: 2px;
margin: 0 auto 16px;
}
/* Buttons — full width in modal actions on mobile */
.modal-actions { flex-direction: column-reverse; }
.modal-actions .btn { width: 100%; text-align: center; padding: 12px; }
/* Search bar stacks */
.search-bar { flex-wrap: wrap; }
.search-input { min-width: 0; }
/* Stat grid — 2 columns minimum */
.stat-grid { grid-template-columns: repeat(2, 1fr); }
/* Hide less critical table columns — add this class to low-priority | / | */
.hide-mobile { display: none; }
}
|