/* ========================================================================== Tourism Ops CRM — application styles (on top of Bootstrap 5.3) Light & dark themes are driven by . ========================================================================== */ :root, [data-bs-theme="light"] { --app-bg: #f4f5f9; --app-surface: #ffffff; --app-surface-2: #f8f9fc; --app-surface-hover: #f3f4f8; --app-border: #e4e7ee; --app-border-strong: #d5d9e3; --app-text: #1c2130; --app-muted: #6a7285; --app-subtle: #9aa1b1; --app-primary: #4f46e5; --app-primary-rgb: 79, 70, 229; --app-primary-hover: #4338ca; --app-primary-soft: rgba(79, 70, 229, .09); --app-primary-text: #4338ca; --app-sidebar-bg: #ffffff; --app-sidebar-text: #4a5163; --app-sidebar-heading: #9aa1b1; --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05); --app-shadow: 0 4px 14px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05); --app-shadow-lg: 0 18px 40px rgba(16, 24, 40, .12); --app-radius: 12px; --app-radius-sm: 8px; --app-sidebar-width: 262px; --app-topbar-height: 64px; --tone-success: #0f9d63; --tone-success-bg: rgba(15, 157, 99, .1); --tone-warning: #b7791f; --tone-warning-bg: rgba(221, 146, 20, .13); --tone-danger: #d23f3f; --tone-danger-bg: rgba(210, 63, 63, .1); --tone-info: #1f7fc4; --tone-info-bg: rgba(31, 127, 196, .1); --tone-primary: #4f46e5; --tone-primary-bg: rgba(79, 70, 229, .1); --tone-secondary: #5f6778; --tone-secondary-bg: rgba(95, 103, 120, .1); --tone-purple: #8b44d6; --tone-purple-bg: rgba(139, 68, 214, .1); --tone-teal: #0e8f8f; --tone-teal-bg: rgba(14, 143, 143, .1); --bs-body-bg: var(--app-bg); --bs-body-color: var(--app-text); --bs-secondary-color: var(--app-muted); --bs-border-color: var(--app-border); --bs-primary: var(--app-primary); --bs-primary-rgb: var(--app-primary-rgb); --bs-link-color: var(--app-primary); --bs-link-color-rgb: var(--app-primary-rgb); --bs-link-hover-color: var(--app-primary-hover); --bs-font-sans-serif: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --bs-body-font-size: .9rem; --bs-border-radius: var(--app-radius-sm); --bs-card-border-color: var(--app-border); } [data-bs-theme="dark"] { --app-bg: #0e1016; --app-surface: #161922; --app-surface-2: #1b1f2a; --app-surface-hover: #1f2430; --app-border: #262b37; --app-border-strong: #323846; --app-text: #e5e8ef; --app-muted: #9aa2b3; --app-subtle: #6f7788; --app-primary: #6c63ff; --app-primary-rgb: 108, 99, 255; --app-primary-hover: #7f77ff; --app-primary-soft: rgba(139, 133, 255, .13); --app-primary-text: #aca8ff; --app-sidebar-bg: #12151d; --app-sidebar-text: #aeb5c4; --app-sidebar-heading: #646c7d; --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --app-shadow: 0 4px 16px rgba(0, 0, 0, .35); --app-shadow-lg: 0 18px 40px rgba(0, 0, 0, .5); --tone-success: #3ccf8e; --tone-success-bg: rgba(60, 207, 142, .13); --tone-warning: #f0b44c; --tone-warning-bg: rgba(240, 180, 76, .14); --tone-danger: #f47272; --tone-danger-bg: rgba(244, 114, 114, .13); --tone-info: #5ab4f0; --tone-info-bg: rgba(90, 180, 240, .13); --tone-primary: #9b96ff; --tone-primary-bg: rgba(139, 133, 255, .15); --tone-secondary: #a3abbb; --tone-secondary-bg: rgba(163, 171, 187, .12); --tone-purple: #c08cff; --tone-purple-bg: rgba(192, 140, 255, .13); --tone-teal: #3cc9c9; --tone-teal-bg: rgba(60, 201, 201, .12); --bs-body-bg: var(--app-bg); --bs-body-color: var(--app-text); --bs-secondary-color: var(--app-muted); --bs-border-color: var(--app-border); --bs-tertiary-bg: var(--app-surface-2); --bs-secondary-bg: var(--app-surface-2); } html { -webkit-text-size-adjust: 100%; } body { background: var(--app-bg); color: var(--app-text); font-feature-settings: "tnum" 0; } a { text-decoration: none; } .icon { flex-shrink: 0; vertical-align: -0.2em; } .text-muted, .text-secondary { color: var(--app-muted) !important; } .text-subtle { color: var(--app-subtle) !important; } .fw-semibold { font-weight: 600 !important; } .tabular { font-variant-numeric: tabular-nums; } .small-caps { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--app-muted); } /* ---------- Buttons ---------- */ .btn { --bs-btn-font-size: .875rem; --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .9rem; --bs-btn-font-weight: 500; border-radius: var(--app-radius-sm); display: inline-flex; align-items: center; gap: .4rem; justify-content: center; } .btn-sm { --bs-btn-font-size: .8rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; } .btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover); --bs-btn-active-bg: var(--app-primary-hover); --bs-btn-active-border-color: var(--app-primary-hover); --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); --bs-btn-focus-shadow-rgb: var(--app-primary-rgb); } [data-bs-theme="dark"] { --bs-link-color: #9d97ff; --bs-link-color-rgb: 157, 151, 255; --bs-link-hover-color: #b8b3ff; } .btn-light, .btn-outline-secondary { --bs-btn-bg: var(--app-surface); --bs-btn-color: var(--app-text); --bs-btn-border-color: var(--app-border-strong); --bs-btn-hover-bg: var(--app-surface-hover); --bs-btn-hover-color: var(--app-text); --bs-btn-hover-border-color: var(--app-border-strong); --bs-btn-active-bg: var(--app-surface-hover); --bs-btn-active-color: var(--app-text); --bs-btn-active-border-color: var(--app-border-strong); } .btn-ghost { --bs-btn-color: var(--app-muted); --bs-btn-hover-bg: var(--app-surface-hover); --bs-btn-hover-color: var(--app-text); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--app-surface-hover); } .btn-icon { padding: .4rem; width: 2.1rem; height: 2.1rem; } .btn-soft-danger { --bs-btn-color: var(--tone-danger); --bs-btn-bg: var(--tone-danger-bg); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--tone-danger); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: transparent; } .btn-soft-success { --bs-btn-color: var(--tone-success); --bs-btn-bg: var(--tone-success-bg); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--tone-success); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: transparent; } /* ---------- Forms ---------- */ .form-label { font-size: .8rem; font-weight: 600; color: var(--app-text); margin-bottom: .35rem; } .form-label .req { color: var(--tone-danger); margin-left: 2px; } .form-control, .form-select { background-color: var(--app-surface); border-color: var(--app-border-strong); font-size: .875rem; padding: .5rem .75rem; border-radius: var(--app-radius-sm); } .form-control:focus, .form-select:focus { border-color: rgba(var(--app-primary-rgb), .6); box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .15); background-color: var(--app-surface); } .form-control-sm, .form-select-sm { padding: .3rem .6rem; font-size: .8rem; } .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); } .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .15); border-color: rgba(var(--app-primary-rgb), .6); } .form-text { color: var(--app-muted); font-size: .76rem; } .input-group-text { background: var(--app-surface-2); border-color: var(--app-border-strong); color: var(--app-muted); font-size: .85rem; } .form-section-title { font-size: .95rem; font-weight: 600; margin-bottom: .15rem; } .form-section-help { font-size: .8rem; color: var(--app-muted); margin-bottom: 1rem; } /* ---------- Shell ---------- */ .app-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--app-sidebar-width); z-index: 1040; background: var(--app-sidebar-bg); border-right: 1px solid var(--app-border); display: flex; flex-direction: column; transition: transform .22s ease; } .app-main { margin-left: var(--app-sidebar-width); min-height: 100vh; display: flex; flex-direction: column; } .app-content { padding: 1.5rem 1.75rem 2.5rem; flex: 1; width: 100%; max-width: 1600px; } .app-footer { padding: 1rem 1.75rem; color: var(--app-subtle); font-size: .78rem; } .sidebar-brand { height: var(--app-topbar-height); display: flex; align-items: center; gap: .7rem; padding: 0 1.1rem; border-bottom: 1px solid var(--app-border); flex-shrink: 0; } .sidebar-brand .brand-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #ec4899); overflow: hidden; flex-shrink: 0; } .sidebar-brand .brand-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; } .sidebar-brand .brand-name { font-weight: 650; font-size: .92rem; line-height: 1.15; color: var(--app-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-brand .brand-sub { font-size: .72rem; color: var(--app-muted); } .sidebar-nav { padding: .75rem .75rem 1.5rem; overflow-y: auto; flex: 1; scrollbar-width: thin; } .sidebar-section { margin-top: 1.1rem; } .sidebar-heading { padding: 0 .75rem .35rem; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--app-sidebar-heading); } .sidebar-link { position: relative; display: flex; align-items: center; gap: .7rem; padding: .5rem .75rem; margin-bottom: 2px; color: var(--app-sidebar-text); border-radius: 8px; font-size: .86rem; font-weight: 500; transition: background .15s, color .15s; } .sidebar-link .icon { color: var(--app-subtle); transition: color .15s; } .sidebar-link:hover { background: var(--app-surface-hover); color: var(--app-text); } .sidebar-link:hover .icon { color: var(--app-text); } .sidebar-link.active { background: var(--app-primary-soft); color: var(--app-primary-text); font-weight: 600; } .sidebar-link.active .icon { color: var(--app-primary-text); } .sidebar-link.active::before { content: ""; position: absolute; left: -.75rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--app-primary); } .sidebar-footer { border-top: 1px solid var(--app-border); padding: .8rem 1rem; font-size: .75rem; color: var(--app-muted); } .sidebar-backdrop { display: none; } .app-topbar { position: sticky; top: 0; z-index: 1030; height: var(--app-topbar-height); display: flex; align-items: center; gap: .75rem; padding: 0 1.75rem; background: color-mix(in srgb, var(--app-bg) 85%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--app-border); } .topbar-search { position: relative; max-width: 380px; flex: 1; } .topbar-search .form-control { padding-left: 2.2rem; background: var(--app-surface); border-color: var(--app-border); } .topbar-search .icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--app-subtle); } .topbar-search kbd { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); background: var(--app-surface-2); color: var(--app-subtle); border: 1px solid var(--app-border); font-size: .68rem; padding: .05rem .35rem; } .avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 600; font-size: .78rem; color: var(--app-primary-text); background: var(--app-primary-soft); flex-shrink: 0; } .avatar-lg { width: 52px; height: 52px; font-size: 1.05rem; } .avatar-sm { width: 28px; height: 28px; font-size: .7rem; } .user-menu-btn { display: flex; align-items: center; gap: .6rem; background: none; border: 0; padding: .25rem .4rem; border-radius: 10px; color: var(--app-text); } .user-menu-btn:hover { background: var(--app-surface-hover); } .user-menu-btn .meta { text-align: left; line-height: 1.15; } .user-menu-btn .meta small { color: var(--app-muted); font-size: .72rem; } .dropdown-menu { --bs-dropdown-bg: var(--app-surface); --bs-dropdown-border-color: var(--app-border); --bs-dropdown-link-hover-bg: var(--app-surface-hover); --bs-dropdown-link-active-bg: var(--app-primary-soft); --bs-dropdown-link-active-color: var(--app-primary-text); --bs-dropdown-font-size: .86rem; border-radius: 10px; box-shadow: var(--app-shadow-lg); padding: .4rem; } .dropdown-item { border-radius: 6px; display: flex; align-items: center; gap: .55rem; padding: .45rem .65rem; } .dropdown-header { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } /* ---------- Page header ---------- */ .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; } .page-title { font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; margin: 0; } .page-subtitle { color: var(--app-muted); font-size: .86rem; margin: .25rem 0 0; } .breadcrumb { --bs-breadcrumb-font-size: .78rem; --bs-breadcrumb-margin-bottom: .35rem; --bs-breadcrumb-divider-color: var(--app-subtle); --bs-breadcrumb-item-active-color: var(--app-muted); } .breadcrumb a { color: var(--app-muted); } .breadcrumb a:hover { color: var(--app-primary); } .page-actions { display: flex; gap: .5rem; flex-wrap: wrap; } /* ---------- Cards ---------- */ .card { --bs-card-bg: var(--app-surface); --bs-card-border-color: var(--app-border); --bs-card-border-radius: var(--app-radius); --bs-card-inner-border-radius: calc(var(--app-radius) - 1px); --bs-card-cap-bg: transparent; --bs-card-spacer-y: 1.15rem; --bs-card-spacer-x: 1.25rem; box-shadow: var(--app-shadow-sm); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .95rem; padding-bottom: .95rem; border-bottom-color: var(--app-border); } .card-title { font-size: .98rem; font-weight: 650; margin: 0; } .card-subtitle { font-size: .78rem; color: var(--app-muted); margin-top: .15rem; } .card-footer { background: var(--app-surface-2); border-top-color: var(--app-border); } .stat-card { display: flex; flex-direction: row; gap: .95rem; align-items: flex-start; padding: 1.1rem 1.2rem; height: 100%; } .stat-card .stat-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; } .stat-card .stat-label { font-size: .78rem; color: var(--app-muted); font-weight: 500; } .stat-card .stat-value { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-top: .15rem; font-variant-numeric: tabular-nums; } .stat-card .stat-hint { font-size: .75rem; color: var(--app-subtle); margin-top: .2rem; } a.stat-link { color: inherit; display: block; height: 100%; } a.stat-link .card { transition: transform .15s, box-shadow .15s, border-color .15s; } a.stat-link:hover .card { transform: translateY(-2px); box-shadow: var(--app-shadow); border-color: var(--app-border-strong); } .tone-success { color: var(--tone-success); background: var(--tone-success-bg); } .tone-warning { color: var(--tone-warning); background: var(--tone-warning-bg); } .tone-danger { color: var(--tone-danger); background: var(--tone-danger-bg); } .tone-info { color: var(--tone-info); background: var(--tone-info-bg); } .tone-primary { color: var(--tone-primary); background: var(--tone-primary-bg); } .tone-secondary { color: var(--tone-secondary); background: var(--tone-secondary-bg); } .tone-purple { color: var(--tone-purple); background: var(--tone-purple-bg); } .tone-teal { color: var(--tone-teal); background: var(--tone-teal-bg); } /* ---------- Badges ---------- */ .badge-soft { display: inline-flex; align-items: center; gap: .3rem; padding: .28em .62em; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.3; white-space: nowrap; } .badge-soft .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge-outline { display: inline-flex; padding: .2em .55em; border-radius: 6px; border: 1px solid var(--app-border-strong); font-size: .72rem; font-weight: 500; color: var(--app-muted); } /* ---------- Tables ---------- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); --bs-table-hover-bg: var(--app-surface-hover); --bs-table-hover-color: var(--app-text); --bs-table-striped-bg: var(--app-surface-2); } .table-app { margin: 0; font-size: .86rem; } .table-app > thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--app-muted); background: var(--app-surface-2); border-bottom-width: 1px; padding: .7rem 1rem; white-space: nowrap; } .table-app > tbody td { padding: .8rem 1rem; vertical-align: middle; } .table-app > tbody tr:last-child td { border-bottom: 0; } .table-app .cell-title { font-weight: 600; color: var(--app-text); } .table-app .cell-sub { font-size: .76rem; color: var(--app-muted); } .table-app a.cell-title:hover { color: var(--app-primary); } .table-actions { display: flex; gap: .25rem; justify-content: flex-end; } .card > .table-responsive:first-child > .table-app > thead th:first-child { border-top-left-radius: var(--app-radius); } .card > .table-responsive { border-radius: inherit; } /* ---------- Filters ---------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .9rem 1.25rem; border-bottom: 1px solid var(--app-border); } .filter-bar .filter-search { position: relative; flex: 1 1 240px; max-width: 360px; } .filter-bar .filter-search .icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--app-subtle); } .filter-bar .filter-search .form-control { padding-left: 2.1rem; width: 100%; } .filter-bar .form-select, .filter-bar .form-control { width: auto; min-width: 150px; } /* ---------- Pagination ---------- */ .pagination { --bs-pagination-font-size: .82rem; --bs-pagination-bg: var(--app-surface); --bs-pagination-border-color: var(--app-border); --bs-pagination-color: var(--app-text); --bs-pagination-hover-bg: var(--app-surface-hover); --bs-pagination-hover-color: var(--app-text); --bs-pagination-hover-border-color: var(--app-border); --bs-pagination-active-bg: var(--app-primary); --bs-pagination-active-border-color: var(--app-primary); --bs-pagination-disabled-bg: var(--app-surface-2); --bs-pagination-disabled-color: var(--app-subtle); --bs-pagination-disabled-border-color: var(--app-border); margin: 0; } .card-pagination { padding: .8rem 1.25rem; border-top: 1px solid var(--app-border); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; } .card-pagination > nav { width: 100%; } .card-pagination p.small { margin: 0; color: var(--app-muted); } .card-pagination .pagination { margin: 0; } /* ---------- Tabs ---------- */ .nav-tabs-app { border-bottom: 1px solid var(--app-border); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .nav-tabs-app .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--app-muted); font-weight: 500; font-size: .86rem; padding: .7rem .9rem; white-space: nowrap; background: none; border-radius: 0; display: flex; align-items: center; gap: .4rem; } .nav-tabs-app .nav-link:hover { color: var(--app-text); } .nav-tabs-app .nav-link.active { color: var(--app-primary-text); border-bottom-color: var(--app-primary); font-weight: 600; } .nav-tabs-app .count { font-size: .7rem; padding: .05rem .4rem; border-radius: 999px; background: var(--app-surface-hover); color: var(--app-muted); } /* ---------- Misc components ---------- */ .empty-state { text-align: center; padding: 3rem 1.5rem; } .empty-state .empty-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 16px; display: grid; place-items: center; background: var(--app-primary-soft); color: var(--app-primary-text); } .empty-state h3 { font-size: 1rem; font-weight: 650; margin-bottom: .3rem; } .empty-state p { color: var(--app-muted); font-size: .86rem; max-width: 420px; margin: 0 auto 1rem; } .detail-list { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: .55rem 1rem; font-size: .86rem; margin: 0; } .detail-list dt { font-weight: 500; color: var(--app-muted); } .detail-list dd { margin: 0; font-weight: 500; word-break: break-word; } .progress { --bs-progress-bg: var(--app-surface-hover); --bs-progress-bar-bg: var(--app-primary); height: .45rem; border-radius: 999px; } .list-group { --bs-list-group-bg: var(--app-surface); --bs-list-group-border-color: var(--app-border); --bs-list-group-action-hover-bg: var(--app-surface-hover); } .modal { --bs-modal-bg: var(--app-surface); --bs-modal-border-color: var(--app-border); --bs-modal-border-radius: 14px; --bs-modal-header-border-color: var(--app-border); --bs-modal-footer-border-color: var(--app-border); } .modal-title { font-size: 1.02rem; font-weight: 650; } .modal-footer { background: var(--app-surface-2); border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; } .alert { border-radius: var(--app-radius-sm); font-size: .86rem; } hr { border-color: var(--app-border); opacity: 1; } .activity-item { display: flex; gap: .8rem; padding: .7rem 0; border-bottom: 1px dashed var(--app-border); } .activity-item:last-child { border-bottom: 0; } .activity-item .activity-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; } .kv-row { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; border-bottom: 1px dashed var(--app-border); font-size: .86rem; } .kv-row:last-child { border-bottom: 0; } .welcome-card { position: relative; overflow: hidden; background: linear-gradient(120deg, #4f46e5 0%, #7c3aed 55%, #db2777 120%); color: #fff; border: 0; } .welcome-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .08); } .welcome-card .btn-light { --bs-btn-bg: rgba(255,255,255,.95); --bs-btn-color: #3730a3; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #312e81; } .welcome-card .text-white-75 { color: rgba(255,255,255,.8); } .module-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 8px; font-size: .78rem; font-weight: 500; border: 1px solid var(--app-border); background: var(--app-surface-2); margin: 0 .35rem .4rem 0; } .module-chip.on { border-color: rgba(var(--app-primary-rgb), .35); background: var(--app-primary-soft); color: var(--app-primary-text); } .module-chip.off { color: var(--app-subtle); text-decoration: line-through; } /* Permission matrix */ .perm-module { border: 1px solid var(--app-border); border-radius: 10px; margin-bottom: .9rem; overflow: hidden; } .perm-module-head { display: flex; align-items: center; justify-content: space-between; padding: .65rem .9rem; background: var(--app-surface-2); border-bottom: 1px solid var(--app-border); } .perm-module-head .form-check-label { font-weight: 600; font-size: .86rem; } .perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .35rem 1rem; padding: .75rem .9rem; } .perm-grid .form-check-label { font-size: .82rem; } .perm-grid code { font-size: .7rem; color: var(--app-subtle); display: block; } /* Toasts */ .toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; max-width: 380px; } .app-toast { display: flex; gap: .7rem; align-items: flex-start; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px; box-shadow: var(--app-shadow-lg); padding: .8rem .9rem; font-size: .86rem; animation: toast-in .25s ease; } .app-toast .toast-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; } .app-toast .toast-body { flex: 1; padding: .2rem 0 0; } .app-toast .btn-close { font-size: .65rem; margin-top: .35rem; } @keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* ---------- Auth pages ---------- */ .auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; } .auth-aside { position: relative; overflow: hidden; color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(1200px 600px at -10% -10%, #6366f1 0%, transparent 55%), radial-gradient(900px 600px at 110% 110%, #db2777 0%, transparent 55%), linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%); } .auth-aside .route-art { position: absolute; inset: 0; opacity: .18; } .auth-aside h1 { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; max-width: 460px; } .auth-aside p { color: rgba(255,255,255,.78); max-width: 440px; } .auth-feature { display: flex; gap: .6rem; align-items: center; color: rgba(255,255,255,.9); font-size: .9rem; margin-bottom: .6rem; } .auth-feature .icon { color: #c4b5fd; } .auth-main { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--app-surface); } .auth-card { width: 100%; max-width: 400px; } .auth-card h2 { font-size: 1.5rem; font-weight: 700; } .auth-theme { position: absolute; top: 1rem; right: 1rem; } /* Error pages */ .error-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem; text-align: center; } .error-code { font-size: 4.5rem; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(135deg, var(--app-primary), #db2777); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } /* ---------- Responsive ---------- */ @media (max-width: 1199.98px) { .app-content { padding: 1.25rem 1.25rem 2rem; } .app-topbar { padding: 0 1.25rem; } } @media (max-width: 991.98px) { .app-sidebar { transform: translateX(-100%); box-shadow: none; } body.sidebar-open .app-sidebar { transform: none; box-shadow: var(--app-shadow-lg); } body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(10, 12, 20, .45); z-index: 1035; } .app-main { margin-left: 0; } .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } } @media (max-width: 575.98px) { .app-content { padding: 1rem .9rem 1.5rem; } .app-topbar { padding: 0 .9rem; gap: .5rem; } .page-title { font-size: 1.2rem; } .page-header { align-items: flex-start; } .filter-bar .form-select, .filter-bar .form-control { flex: 1 1 140px; min-width: 0; } .filter-bar .filter-search { max-width: none; } .detail-list { grid-template-columns: 1fr; gap: .1rem; } .detail-list dd { margin-bottom: .6rem; } /* Tables become stacked cards on phones */ .table-stack thead { display: none; } .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; } .table-stack tr { border-bottom: 1px solid var(--app-border); padding: .6rem 0; } .table-stack td { border: 0 !important; padding: .25rem 1rem !important; display: flex; justify-content: space-between; gap: 1rem; text-align: right; } .table-stack td::before { content: attr(data-label); font-size: .72rem; font-weight: 600; color: var(--app-muted); text-transform: uppercase; letter-spacing: .04em; text-align: left; } .table-stack td.table-actions-cell::before { content: none; } .table-stack td:first-child { text-align: left; } .table-stack td:first-child::before { content: none; } .table-stack td[colspan] { display: block; text-align: center; } .table-stack td[colspan]::before { content: none; } } /* ---------- Print ---------- */ @media print { .app-sidebar, .app-topbar, .page-actions, .filter-bar, .card-pagination, .toast-stack, .no-print { display: none !important; } .app-main { margin: 0; } .app-content { padding: 0; max-width: none; } .card { box-shadow: none; border-color: #ccc; } body { background: #fff; } } /* ---- Phase 3+ additions ------------------------------------------------ */ @media (max-width: 575.98px) { .stat-card { padding: .85rem .9rem; gap: .6rem; } .stat-card .stat-icon { width: 34px; height: 34px; border-radius: 9px; } .stat-card .stat-value { font-size: 1.1rem; word-break: break-word; } } .card-hover { transition: transform .12s ease, box-shadow .12s ease; } .card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20, 24, 40, .08); } .global-search-results .dropdown-item { white-space: normal; } .table-app td.desc-cell { min-width: 220px; } [draggable="true"] .card-header { cursor: grab; }