/* |-------------------------------------------------------------------------- | QYVERIX OPERATIONS |-------------------------------------------------------------------------- | CORE APPLICATION STYLES |-------------------------------------------------------------------------- */ :root { /* |---------------------------------------------------------------------- | PORCELAIN & DEEP BLUE |---------------------------------------------------------------------- | Light chrome, deep navy type, one saturated blue accent. Chrome | (sidebar / topbar) gets its own token family so flipping it light or | dark never has to touch component rules again — the previous palette | hardcoded the sidebar to the dark ink colour and white-alpha borders. | | Legacy names (--gold family, --primary, --secondary, --light, --white, | --border, --text-light) remain as aliases at the bottom so older rules | keep resolving. |---------------------------------------------------------------------- */ /* Chrome — sidebar and topbar */ --chrome: #FFFFFF; --chrome-line: #E2E8F0; --chrome-hover: #F1F5F9; /* Deep navy type / dark elements */ --ink: #0F172A; --ink-soft: #1E293B; --ink-line: #334155; /* Accent */ --accent: #1D4ED8; --accent-dark: #1739A8; --accent-soft: #7C9AEE; --accent-wash: #E8EEFB; /* Ground */ --canvas: #F5F7FA; --surface: #FFFFFF; --surface-alt: #FAFBFD; --line: #E2E8F0; --line-soft: #EDF1F6; /* Type */ --text: #0F172A; --text-strong: #020617; --muted: #64748B; --muted-soft: #94A3B8; /* Semantic */ --ok: #15803D; --ok-wash: #E3F1E8; --warn: #B45309; --warn-wash: #FAEEDD; --danger: #B91C1C; --danger-wash: #FBE7E7; --info: #1D4ED8; --info-wash: #E8EEFB; --violet: #6D28D9; --violet-wash: #EFE8FB; --stone-wash: #EEF2F6; /* Metrics */ --sidebar-width: 272px; --topbar-height: 76px; --radius: 14px; --radius-sm: 10px; --radius-lg: 20px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow: 0 4px 16px rgba(15, 23, 42, 0.07); --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12); --transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1); color-scheme: light; /* | Aliases — legacy names mapped onto the current palette. --gold dates | from the Obsidian & Gold palette; keep it resolving to the accent. */ --gold: var(--accent); --gold-dark: var(--accent-dark); --gold-soft: var(--accent-soft); --gold-wash: var(--accent-wash); --primary: var(--accent); --primary-dark: var(--accent-dark); --secondary: var(--ink); --success: var(--ok); --warning: var(--warn); --info-legacy: var(--info); --light: var(--canvas); --white: var(--surface); --border: var(--line); --text-light: var(--muted); --shadow-legacy: var(--shadow); } /* |-------------------------------------------------------------------------- | DARK THEME |-------------------------------------------------------------------------- | Follows the operating system by default; the topbar toggle stamps | data-theme on and wins over it in both directions. |-------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chrome: #0D1220; --chrome-line: #1D2740; --chrome-hover:#161F33; --canvas: #0A0E16; --surface: #101623; --surface-alt: #161D2E; --line: #232D42; --line-soft: #1B2334; --text: #E2E8F3; --text-strong: #FFFFFF; --muted: #8B99B0; --muted-soft: #5E6B84; --ink: #0A0E16; --ink-soft: #101623; --accent: #5B85F0; --accent-dark: #3D66DE; --accent-soft: #7FA0F4; --accent-wash: #16233F; /* | The semantic foregrounds have to lift too. Their light values are | dark saturated inks made for a white ground; left alone they end up | painted onto the dark washes below — a #15803D glyph on a #10241A | tile — and every toned icon disappears in dark mode while staying | perfectly legible in light. */ --ok: #4ADE80; --warn: #FBBF24; --danger: #F87171; --info: #5B85F0; --violet: #A78BFA; --ok-wash: #10241A; --warn-wash: #2A1F0E; --danger-wash: #2A1414; --info-wash: #14213B; --violet-wash: #201636; --stone-wash: #1A2130; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55); color-scheme: dark; } } :root[data-theme="dark"] { --chrome: #0D1220; --chrome-line: #1D2740; --chrome-hover:#161F33; --canvas: #0A0E16; --surface: #101623; --surface-alt: #161D2E; --line: #232D42; --line-soft: #1B2334; --text: #E2E8F3; --text-strong: #FFFFFF; --muted: #8B99B0; --muted-soft: #5E6B84; --ink: #0A0E16; --ink-soft: #101623; --accent: #5B85F0; --accent-dark: #3D66DE; --accent-soft: #7FA0F4; --accent-wash: #16233F; /* Lifted for the dark ground — see the note in the media-query block. */ --ok: #4ADE80; --warn: #FBBF24; --danger: #F87171; --info: #5B85F0; --violet: #A78BFA; --ok-wash: #10241A; --warn-wash: #2A1F0E; --danger-wash: #2A1414; --info-wash: #14213B; --violet-wash: #201636; --stone-wash: #1A2130; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55); color-scheme: dark; } /* |-------------------------------------------------------------------------- | RESET |-------------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--canvas); color: var(--text); overflow-x: hidden; } /* |-------------------------------------------------------------------------- | LINKS |-------------------------------------------------------------------------- */ a { text-decoration: none; color: inherit; } /* |-------------------------------------------------------------------------- | BUTTONS |-------------------------------------------------------------------------- */ .btn { border: none; outline: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 14px; font-size: 14px; font-weight: 600; transition: var(--transition); } .btn-primary { background: var(--primary); /* Text on a coloured button never follows the theme. */ color: #FFFFFF; } .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); } /* |-------------------------------------------------------------------------- | APPLICATION LAYOUT |-------------------------------------------------------------------------- */ .qyverix-app { display: flex; min-height: 100vh; } /* |-------------------------------------------------------------------------- | SIDEBAR |-------------------------------------------------------------------------- */ .sidebar { width: var(--sidebar-width); background: var(--chrome); color: var(--text); border-right: 1px solid var(--chrome-line); position: fixed; top: 0; left: 0; height: 100vh; display: flex; flex-direction: column; z-index: 999; transition: var(--transition); } .sidebar-header { padding: 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--chrome-line); } .brand { display: flex; align-items: center; gap: 14px; } .brand-logo { width: 52px; height: 52px; object-fit: contain; } .brand-content h2 { font-size: 20px; font-weight: 800; } .brand-content span { font-size: 12px; color: var(--muted-soft); } .sidebar-close { display: none; background: transparent; border: none; color: var(--muted); font-size: 22px; cursor: pointer; } /* |-------------------------------------------------------------------------- | NAVIGATION |-------------------------------------------------------------------------- */ .sidebar-nav { flex: 1; overflow-y: auto; padding: 20px 14px; } .nav-group { margin-bottom: 28px; } .nav-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-soft); margin: 0 14px 14px; } .nav-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 8px; border-radius: 14px; transition: var(--transition); color: var(--muted); font-weight: 500; position: relative; } .nav-item:hover { background: var(--chrome-hover); color: var(--text); } .nav-item.active { background: var(--primary); color: white; } .nav-item i { width: 18px; text-align: center; } .nav-badge { margin-left: auto; background: white; color: var(--primary); min-width: 22px; height: 22px; border-radius: 50px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } /* |-------------------------------------------------------------------------- | SIDEBAR FOOTER |-------------------------------------------------------------------------- */ .sidebar-footer { padding: 20px; border-top: 1px solid var(--chrome-line); } .user-card { display: flex; align-items: center; gap: 14px; } .user-avatar img, .profile-avatar img, .table-user-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .user-avatar span, .profile-avatar span, .table-user-avatar span { width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; } .user-info h4 { font-size: 15px; } .user-info span { font-size: 12px; color: var(--muted-soft); } /* |-------------------------------------------------------------------------- | MAIN CONTENT |-------------------------------------------------------------------------- */ .main-content { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); min-height: 100vh; } /* |-------------------------------------------------------------------------- | TOPBAR |-------------------------------------------------------------------------- */ .topbar { height: var(--topbar-height); background: var(--chrome); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 998; } .topbar-left, .topbar-right { display: flex; align-items: center; gap: 18px; } .topbar-title h1 { font-size: 24px; font-weight: 700; } .topbar-title span { color: var(--text-light); font-size: 13px; } .menu-toggle { width: 46px; height: 46px; border-radius: 14px; border: none; background: var(--accent-wash); color: var(--primary); font-size: 18px; cursor: pointer; display: none; } /* |-------------------------------------------------------------------------- | SEARCH |-------------------------------------------------------------------------- */ .topbar-search { display: flex; align-items: center; gap: 12px; background: var(--canvas); padding: 12px 16px; border-radius: 14px; min-width: 280px; } .topbar-search input { border: none; outline: none; background: transparent; width: 100%; } /* |-------------------------------------------------------------------------- | CONTENT |-------------------------------------------------------------------------- */ .content-wrapper { padding: 28px; } .page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; } .page-header h1 { font-size: 32px; font-weight: 800; margin-bottom: 8px; } .page-header p { color: var(--text-light); } /* |-------------------------------------------------------------------------- | CARDS |-------------------------------------------------------------------------- */ .dashboard-card, .stat-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); } .stat-card { padding: 24px; display: flex; align-items: center; gap: 18px; } .stat-icon { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; } .stat-icon.blue { background: linear-gradient(135deg,var(--info),var(--info)); } .stat-icon.green { background: linear-gradient(135deg,var(--ok),var(--ok)); } .stat-icon.orange { background: linear-gradient(135deg,var(--warn),var(--warn)); } .stat-icon.purple { background: linear-gradient(135deg,var(--violet),var(--violet)); } .stat-info h3 { font-size: 28px; font-weight: 800; } .stat-info p { color: var(--text-light); margin-top: 4px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 24px; margin-bottom: 28px; } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(380px,1fr)); gap: 24px; margin-bottom: 28px; } .dashboard-card { padding: 24px; } /* | A card sitting straight on the page rather than inside a grid carried no | spacing of its own. The grids space themselves with the 28px below, so a | standalone card left the next block butted against it and the two box | shadows overlapped — Financial Report against Workforce Analytics and | System Health on the reports page, and the same wherever else a bare card | precedes another block. | | Scoped to direct children of the two page wrappers: cards inside a grid | are spaced by its gap and must not pick up a margin as well. */ .page-container > .dashboard-card, .dashboard-page > .dashboard-card { margin-bottom: 28px; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .card-header h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; } /* |-------------------------------------------------------------------------- | TABLES |-------------------------------------------------------------------------- */ .table-responsive { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; } .data-table th { text-align: left; padding: 16px; background: var(--canvas); font-size: 13px; color: var(--text-light); } .data-table td { padding: 16px; border-bottom: 1px solid var(--canvas); } .table-user { display: flex; align-items: center; gap: 12px; } .table-user-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-wash); color: var(--primary); display: flex; align-items: center; justify-content: center; } .table-buttons { display: flex; gap: 10px; } .table-btn { width: 38px; height: 38px; border: none; border-radius: 12px; background: var(--accent-wash); color: var(--primary); cursor: pointer; } .table-btn.danger { background: var(--danger-wash); color: var(--danger); } /* |-------------------------------------------------------------------------- | BADGES |-------------------------------------------------------------------------- */ .status-badge, .priority-badge, .type-badge, .source-badge { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; background: var(--accent-wash); color: var(--primary); } /* |-------------------------------------------------------------------------- | FORMS |-------------------------------------------------------------------------- */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; } .form-group input, .form-group select, .form-group textarea, .form-control { width: 100%; padding: 14px 16px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; outline: none; transition: var(--transition); font-family: inherit; } .form-group input::placeholder, .form-group textarea::placeholder, .form-control::placeholder { color: var(--muted-soft); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus, .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(29, 78, 216,0.08); } /* |-------------------------------------------------------------------------- | MODAL |-------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; background: rgba(15, 23, 42,0.6); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 9999; } .modal.active { display: flex; } .modal-content { width: 100%; max-width: 800px; background: var(--surface); border-radius: 24px; padding: 28px; max-height: 92vh; overflow-y: auto; } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .modal-close { border: none; background: var(--canvas); width: 42px; height: 42px; border-radius: 12px; cursor: pointer; } /* |-------------------------------------------------------------------------- | ALERTS |-------------------------------------------------------------------------- */ .alert { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; margin-bottom: 24px; } .alert-success { background: var(--ok-wash); color: var(--ok); } .alert-error { background: var(--danger-wash); color: var(--danger); } .alert-warning { background: var(--warn-wash); color: var(--warn); } .alert-info { background: var(--info-wash); color: var(--info); } /* |-------------------------------------------------------------------------- | AUTH PAGE |-------------------------------------------------------------------------- */ .auth-wrapper { min-height: 100vh; display: grid; grid-template-columns: 1fr 500px; } .auth-left { /* | Brand splash — stays deep navy in both themes, so its colours are | literal rather than tokens. Everything on it is white-on-dark. */ background: linear-gradient( 135deg, #0F172A, #1E293B ); color: #FFFFFF; padding: 60px; display: flex; flex-direction: column; justify-content: center; } .auth-right { display: flex; align-items: center; justify-content: center; padding: 40px; } .auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 40px; box-shadow: var(--shadow); } /* |-------------------------------------------------------------------------- | RESPONSIVE |-------------------------------------------------------------------------- */ @media (max-width: 1200px) { .auth-wrapper { grid-template-columns: 1fr; } .auth-left { display: none; } } @media (max-width: 992px) { .sidebar { transform: translateX(-100%); } .sidebar.active { transform: translateX(0); } .main-content { margin-left: 0; width: 100%; } .menu-toggle, .sidebar-close { display: flex; align-items: center; justify-content: center; } .mobile-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42,0.4); z-index: 998; display: none; } .mobile-overlay.active { display: block; } } @media (max-width: 768px) { .content-wrapper { padding: 18px; } .topbar { padding: 0 18px; } .topbar-search { display: none; } .page-header { flex-direction: column; align-items: flex-start; } .dashboard-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } } /* |-------------------------------------------------------------------------- | CRUD UI ADDITIONS (forms, buttons, status badges) |-------------------------------------------------------------------------- */ .required { color: var(--danger); font-weight: 700; } .btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--stone-wash); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s ease; } .btn-secondary:hover { background: var(--line); } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-xs { padding: 4px 9px; font-size: 12px; } /* status badge colour variants */ .status-badge.status-completed, .status-badge.status-active, .status-badge.status-converted { background: var(--ok-wash); color: var(--ok); } .status-badge.status-pending, .status-badge.status-contacted, .status-badge.status-in-progress { background: var(--warn-wash); color: var(--warn); } .status-badge.status-rejected, .status-badge.status-failed, .status-badge.status-inactive, .status-badge.status-cancelled { background: var(--danger-wash); color: var(--danger); } /* priority colour variants */ .status-badge.priority-low { background: var(--info-wash); color: var(--info); } .status-badge.priority-medium { background: var(--warn-wash); color: var(--warn); } .status-badge.priority-high { background: var(--danger-wash); color: var(--danger); } /* modal footer button row */ .modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .w-full { width: 100%; justify-content: center; } .badge { background:var(--stone-wash); color:var(--muted); padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; } .badge-info { background:var(--info-wash); color:var(--info); } .badge-success { background:var(--ok-wash); color:var(--ok); } /* global search results page */ .search-bar-form { width: 100%; } .search-bar { display: flex; align-items: center; gap: 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; } .search-bar i { color: var(--muted-soft); } .search-bar input { flex: 1; border: none; background: transparent; outline: none; font-size: 15px; color: var(--text); } .empty-state { text-align: center; padding: 48px 20px; } .empty-state .empty-icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 12px; background: var(--stone-wash); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 26px; } .empty-state h3 { color: var(--text); margin-bottom: 6px; } .empty-state p { color: var(--muted); font-size: 14px; } /* payment proof thumbnail */ .proof-thumb { display: inline-block; width: 46px; height: 46px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--canvas); } .proof-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s ease; } .proof-thumb:hover img { transform: scale(1.08); } .dim { color: var(--muted-soft); } .form-hint { display:block; margin-top:6px; color:var(--muted-soft); font-size:12px; } .alert-info { background:var(--info-wash); border:1px solid var(--info-wash); color:var(--info); padding:14px 16px; border-radius:8px; margin-bottom:20px; } /* |-------------------------------------------------------------------------- | TOPBAR FIXES |-------------------------------------------------------------------------- | The .topbar-search element is now a
, which has a browser-default | bottom margin that shifts the topbar layout. Reset it. Also make sure | topbar items don't overflow on smaller screens and the notification / | profile dropdowns stack above page content. |-------------------------------------------------------------------------- */ form.topbar-search { margin: 0; } /* Make sure dropdown menus float above page content */ .topbar-notifications, .topbar-profile { position: relative; } .notification-dropdown, .profile-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.08); z-index: 1000; display: none; overflow: hidden; } .notification-dropdown.active, .profile-dropdown.active { display: block; } /* Profile dropdown items: clean rows */ .profile-dropdown a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--text); text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--stone-wash); transition: background .12s ease; } .profile-dropdown a:hover { background: var(--canvas); } .profile-dropdown a:last-child { border-bottom: none; } .profile-dropdown hr { margin: 0; border: none; border-top: 1px solid var(--line); } .profile-dropdown a.logout-link { color: var(--danger); } /* Notification count badge — sit on the bell */ .notification-btn { position: relative; } .notification-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--danger); color: var(--surface); border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* Tighter spacing so the topbar fits comfortably on smaller widths */ @media (max-width: 1100px) { .topbar-search { min-width: 200px; } } @media (max-width: 900px) { .topbar-search { display: none; } } /* |-------------------------------------------------------------------------- | TOPBAR — quick-actions, notification bell, profile button |-------------------------------------------------------------------------- | Without these, the topbar icons stack vertically and look jammed. |-------------------------------------------------------------------------- */ .quick-actions { display: inline-flex; align-items: center; gap: 8px; } .quick-btn, .notification-btn { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: var(--canvas); border: 1px solid var(--line); font-size: 15px; text-decoration: none; cursor: pointer; transition: color .15s, background .15s, border-color .15s; } .quick-btn:hover, .notification-btn:hover { color: var(--accent); background: var(--surface); border-color: var(--accent); } .profile-btn { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 4px 10px 4px 4px; cursor: pointer; transition: background .15s, border-color .15s; } .profile-btn:hover { background: var(--canvas); border-color: var(--line); } .profile-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; overflow: hidden; flex-shrink: 0; } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .profile-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; } .profile-meta h4 { font-size: 13px; font-weight: 600; color: var(--text); margin: 0; } .profile-meta span { font-size: 11px; color: var(--muted); margin-top: 2px; } .profile-btn > .fa-chevron-down { font-size: 11px; color: var(--muted-soft); margin-left: 4px; } /* Mobile: collapse the icon row + hide the user's name (avatar stays) */ @media (max-width: 900px) { .quick-actions { display: none; } .profile-meta { display: none; } } /* |-------------------------------------------------------------------------- | MOBILE RESPONSIVE — final polish pass |-------------------------------------------------------------------------- | Foundation already handled: sidebar drawer, mobile overlay, stats-grid | auto-fit, table-responsive overflow-x, form-grid 1fr. This block fixes | the remaining gaps: modal overflow, page/topbar headings, card padding, | dropdown viewport overflow, receipt toolbar, action button wrapping. |-------------------------------------------------------------------------- */ @media (max-width: 768px) { /* Topbar — auto-height, tighter */ .topbar { height: auto; padding: 10px 14px; gap: 10px; } .topbar-title h1 { font-size: 17px; } .topbar-title span { font-size: 11px; } .topbar-right { gap: 10px; } /* Page header */ .page-header { gap: 12px; margin-bottom: 18px; } .page-header h1 { font-size: 22px; } .page-header p { font-size: 13px; } .page-actions { flex-wrap: wrap; gap: 8px; width: 100%; } .page-actions .btn, .page-actions .btn-primary, .page-actions .btn-secondary { flex: 1 1 auto; justify-content: center; } /* Cards & stats */ .dashboard-card { padding: 18px; } .stat-card { padding: 18px; gap: 14px; } .stat-icon { width: 48px; height: 48px; font-size: 18px; } .stat-info h3 { font-size: 22px; } .stat-info p { font-size: 12px; } /* Modal — scrollable on tall forms */ .modal { padding: 12px; align-items: flex-start; } .modal-content { max-height: 92vh; overflow-y: auto; padding: 22px; } .modal-header h3 { font-size: 16px; } /* Dropdowns shouldn't exceed viewport */ .notification-dropdown, .profile-dropdown { right: -6px; min-width: 0; width: calc(100vw - 32px); max-width: 320px; } /* Tighter table buttons */ .table-buttons { gap: 4px; flex-wrap: wrap; } .table-btn { width: 32px; height: 32px; } /* View toggle */ .view-toggle { padding: 2px; } .view-toggle-btn { padding: 6px 10px; font-size: 12px; } /* Sort form inline shrink */ .table-actions { flex-wrap: wrap !important; gap: 8px !important; } .table-search { width: 100%; } /* Auth login mobile */ .auth-card { padding: 28px 22px; } } @media (max-width: 480px) { .content-wrapper { padding: 12px; } /* Cards even tighter */ .dashboard-card { padding: 14px; border-radius: 10px; } .stat-card { padding: 14px; gap: 10px; } .stat-icon { width: 42px; height: 42px; font-size: 16px; border-radius: 12px; } .stat-info h3 { font-size: 19px; } .stats-grid { gap: 10px; grid-template-columns: repeat(2, 1fr); } .page-header h1 { font-size: 20px; } /* Modal nearly full-screen */ .modal { padding: 6px; } .modal-content { padding: 18px; border-radius: 8px; } .form-group label { font-size: 13px; } /* Receipt toolbar stacks */ .receipt-wrap .toolbar { flex-direction: column; gap: 8px; align-items: stretch; } .receipt-wrap .toolbar a, .receipt-wrap .toolbar button { width: 100%; justify-content: center; } } /* | Prevent a single long unbroken string (URL, hash, reference id) from | forcing horizontal scroll. | | break-word, NOT anywhere: `anywhere` also collapses each element's | min-content width to one character, which let table columns squeeze to | nothing and shattered ordinary words mid-syllable ("Livin g Lines Phas | e 3 Paym ent"). break-word only kicks in when a single word alone | overflows its line box, and leaves min-content intact. Table cells are | excluded entirely — .table-responsive scrolls them instead. */ body, .dashboard-card, .notification-card { overflow-wrap: break-word; } /* |-------------------------------------------------------------------------- | KANBAN BOARD (project tasks) |-------------------------------------------------------------------------- */ .view-toggle { display: inline-flex; background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; padding: 3px; margin-right: 10px; } .view-toggle-btn { border: none; background: transparent; color: var(--muted); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; } .view-toggle-btn.active { background: var(--surface); color: var(--text); /* --ink is near-black on the dark surface */ box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; } @media (max-width: 1024px) { .kanban-board { grid-template-columns: 1fr; } } .kanban-column { background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; padding: 14px; min-height: 280px; transition: background .15s ease, border-color .15s ease; } .kanban-column.drop-target { background: var(--warn-wash); border-color: var(--accent); } .kanban-column-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0 4px; } .kanban-column-title { font-weight: 700; color: var(--text); font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .kanban-column-count { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; color: var(--muted); } .kanban-column-body { display: flex; flex-direction: column; gap: 10px; min-height: 100px; } .kanban-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); cursor: grab; transition: box-shadow .15s ease, transform .15s ease; } .kanban-card:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.08); } .kanban-card.dragging { opacity: .5; transform: rotate(-1deg); cursor: grabbing; } .kanban-card-title { font-weight: 600; color: var(--text); margin-bottom: 10px; font-size: 14px; line-height: 1.4; } .kanban-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .kanban-priority { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px; } .kanban-priority.priority-low { background: var(--info-wash); color: var(--info); } .kanban-priority.priority-medium { background: var(--warn-wash); color: var(--warn); } .kanban-priority.priority-high { background: var(--danger-wash); color: var(--danger); } .kanban-due { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; } .kanban-due.overdue { color: var(--danger); font-weight: 600; } .kanban-assignee { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--stone-wash); margin-bottom: 8px; } .kanban-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .kanban-actions { display: flex; gap: 4px; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--stone-wash); }