/* ========================================================================= Farakiosk UI — design system layer Loaded after the compiled Metronic/Bootstrap bundle, so it owns the look. Build-independent (lives in public/css, survives Mix's del.sync). RTL-first, Persian-tuned, light + dark. ========================================================================= */ /* ------------------------------------------------------------------ Fonts */ @font-face { font-family: 'Vazirmatn'; src: url('/plugins/fonts/vazirmatn/Vazirmatn-VF.woff2') format('woff2-variations'), url('/plugins/fonts/vazirmatn/Vazirmatn-VF.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* keep legacy faces alive so any page that still references them won't break */ @font-face { font-family: 'iran-yekan'; src: url('/plugins/fonts/yekan/Yekan.woff') format('woff'), url('/plugins/fonts/yekan/Yekan.ttf') format('truetype'); font-weight: normal; font-display: swap; } @font-face { font-family: 'vazir'; src: url('/plugins/fonts/vazir/Vazir-Black.woff2') format('woff2'), url('/plugins/fonts/vazir/Vazir-Black.woff') format('woff'); font-weight: 900; font-display: swap; } /* ------------------------------------------------------------- Tokens */ :root { /* brand — Teal + Graphite */ --fk-brand-50: #f0fdfa; --fk-brand-100: #ccfbf1; --fk-brand-200: #99f6e4; --fk-brand-300: #5eead4; --fk-brand-400: #14b8a6; /* accent */ --fk-brand-500: #0d9488; /* primary */ --fk-brand-600: #0f766e; --fk-brand-700: #115e59; --fk-brand-rgb: 13, 148, 136; --fk-accent: #14b8a6; /* semantic */ --fk-success: #16a34a; --fk-success-rgb: 22,163,74; --fk-warning: #d97706; --fk-warning-rgb: 217,119,6; --fk-danger: #dc2626; --fk-danger-rgb: 220,38,38; --fk-info: #2563eb; --fk-info-rgb: 37,99,235; /* surfaces & text */ --fk-bg: #f4f6f9; --fk-surface: #ffffff; --fk-surface-2: #f7f8fa; --fk-surface-3: #eef1f5; --fk-text-1: #1a1d21; --fk-text-2: #5b5e63; --fk-text-3: #8a8d92; --fk-border: #e7e8eb; --fk-border-2: #eef0f3; /* sidebar (graphite) */ --fk-sidebar-bg: #1b2227; --fk-sidebar-bg-2: #141a1e; --fk-sidebar-text: rgba(255,255,255,.72); --fk-sidebar-muted: rgba(255,255,255,.45); --fk-sidebar-hover: rgba(255,255,255,.06); --fk-sidebar-active: rgba(var(--fk-brand-rgb), .16); /* shape & motion */ --metallic: #141a1e; /* legacy var referenced by sidebar logo partial */ --fk-radius: 16px; --fk-radius-lg: 20px; --fk-radius-sm: 10px; --fk-radius-pill: 999px; --fk-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04); --fk-shadow: 0 4px 16px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04); --fk-shadow-lg: 0 12px 40px rgba(16,24,40,.12), 0 4px 12px rgba(16,24,40,.06); --fk-ease: cubic-bezier(.4, 0, .2, 1); /* type scale */ --fk-fs-h1: 1.5rem; /* 24 */ --fk-fs-h2: 1.2rem; /* ~19 */ --fk-fs-h3: 1.05rem; /* ~17 */ --fk-fs-body: .95rem; /* ~15 */ --fk-fs-sm: .85rem; --fk-fs-xs: .78rem; /* re-map Bootstrap/Metronic primary -> brand teal (covers most components) */ --bs-primary: #0d9488; --bs-primary-rgb: 13, 148, 136; --bs-link-color: #0f766e; --bs-link-color-rgb: 15, 118, 110; --bs-link-hover-color: #115e59; --bs-border-radius: .75rem; --bs-border-radius-sm: .5rem; --bs-border-radius-lg: 1rem; --bs-body-font-family: 'Vazirmatn', 'vazir', 'iran-yekan', Tahoma, sans-serif; --bs-body-color: #1a1d21; --bs-body-bg: #f4f6f9; } /* dark mode (Metronic toggles data-bs-theme on ) */ [data-bs-theme="dark"] { --fk-bg: #121317; --fk-surface: #1b1c20; --fk-surface-2: #232429; --fk-surface-3: #2a2c32; --fk-text-1: #f2f3f5; --fk-text-2: #b3b6bb; --fk-text-3: #82858b; --fk-border: #2c2e34; --fk-border-2: #25272c; --fk-brand-500: #14b8a6; --fk-sidebar-bg: #11171a; --fk-sidebar-bg-2: #0c1012; --fk-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --fk-shadow: 0 4px 16px rgba(0,0,0,.45); --fk-shadow-lg: 0 12px 40px rgba(0,0,0,.55); --bs-body-bg: #121317; --bs-body-color: #f2f3f5; } /* ----------------------------------------------------------------- Base */ html, body { font-family: 'Vazirmatn', 'vazir', 'iran-yekan', Tahoma, sans-serif !important; font-size: var(--fk-fs-body); line-height: 1.7; letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--fk-bg) !important; color: var(--fk-text-1); } .app-content, .app-wrapper, #kt_app_main { background: transparent; } /* tabular numerals in data contexts (Persian/Latin digits align) */ .table, .badge, .fk-stat-value, input, .form-control, td, th { font-variant-numeric: tabular-nums; } h1,h2,h3,h4,h5,h6,.fw-bold,.fw-bolder { font-weight: 700; letter-spacing: 0; } h1,.h1 { font-size: var(--fk-fs-h1); } h2,.h2 { font-size: var(--fk-fs-h2); } h3,.h3 { font-size: var(--fk-fs-h3); } a { text-decoration: none; } ::selection { background: rgba(var(--fk-brand-rgb), .22); } /* slimmer, modern scrollbars */ * { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.18) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.28); } [data-bs-theme="dark"] * { scrollbar-color: rgba(255,255,255,.2) transparent; } /* ----------------------------------------------------- Cards & surfaces */ .card { background: var(--fk-surface); border: 1px solid var(--fk-border); border-radius: var(--fk-radius); box-shadow: var(--fk-shadow-sm); transition: box-shadow .2s var(--fk-ease), transform .2s var(--fk-ease); } .card.shadow-sm, .card.shadow { box-shadow: var(--fk-shadow-sm) !important; } .card.card-hover:hover, .card.fk-card-hover:hover { box-shadow: var(--fk-shadow); transform: translateY(-2px); } .card > .card-header, .card-header { background: transparent; border-bottom: 1px solid var(--fk-border-2); min-height: unset; padding: 1.1rem 1.4rem; } .card-title { font-weight: 700; color: var(--fk-text-1); } /* KILL the global overflow hack that forced a scrollbar on every card body */ .card-body { overflow-x: visible !important; padding: 1.4rem; } .fk-scroll-x { overflow-x: auto; } .separator { border-bottom: 1px solid var(--fk-border-2); } /* ----------------------------------------------------------- Buttons */ .btn { --bs-btn-border-radius: var(--fk-radius-sm); font-weight: 600; border-radius: var(--fk-radius-sm); transition: all .18s var(--fk-ease); letter-spacing: 0; } .btn:active { transform: translateY(1px); } .btn-lg { border-radius: 12px; } .btn-sm { border-radius: 8px; } .btn-primary { --bs-btn-bg: var(--fk-brand-500); --bs-btn-border-color: var(--fk-brand-500); --bs-btn-hover-bg: var(--fk-brand-600); --bs-btn-hover-border-color: var(--fk-brand-600); --bs-btn-active-bg: var(--fk-brand-700); --bs-btn-active-border-color: var(--fk-brand-700); --bs-btn-disabled-bg: var(--fk-brand-300); --bs-btn-disabled-border-color: var(--fk-brand-300); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; box-shadow: 0 4px 12px rgba(var(--fk-brand-rgb), .28); } .btn-primary:hover { box-shadow: 0 6px 18px rgba(var(--fk-brand-rgb), .36); } .btn-light-primary { --bs-btn-color: var(--fk-brand-600); --bs-btn-bg: var(--fk-brand-50); --bs-btn-border-color: var(--fk-brand-50); --bs-btn-hover-bg: var(--fk-brand-500); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--fk-brand-500); } /* legacy orange button classes (used across ~37 views) — re-skinned, kept */ .btn-orange { background-color: var(--fk-brand-500) !important; border: 1px solid var(--fk-brand-500) !important; color: #fff !important; border-radius: var(--fk-radius-sm) !important; font-weight: 600; box-shadow: 0 4px 12px rgba(var(--fk-brand-rgb), .28); transition: all .18s var(--fk-ease); } .btn-orange:hover, .btn-orange:focus { background-color: var(--fk-brand-600) !important; border-color: var(--fk-brand-600) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(var(--fk-brand-rgb), .36); } .btn-orange i, .btn-orange .ki-duotone { color: #fff !important; } .btn-outline-orange { color: var(--fk-brand-600) !important; background: transparent; border: 1.5px solid var(--fk-brand-500) !important; border-radius: var(--fk-radius-sm) !important; font-weight: 600; transition: all .18s var(--fk-ease); } .btn-outline-orange:hover { background-color: var(--fk-brand-50) !important; color: var(--fk-brand-700) !important; } .btn-light-orange { background-color: var(--fk-brand-50) !important; color: var(--fk-brand-600) !important; border: 1px solid transparent !important; border-radius: var(--fk-radius-sm) !important; font-weight: 600; } .btn-light-orange:hover { background-color: var(--fk-brand-500) !important; color: #fff !important; } .text-bg-orange { background-color: var(--fk-brand-500) !important; color: #fff !important; } .text-orange, .text-warning.text-orange { color: var(--fk-brand-500) !important; } .btn-light { --bs-btn-bg: var(--fk-surface-2); --bs-btn-border-color: var(--fk-border); --bs-btn-color: var(--fk-text-1); --bs-btn-hover-bg: var(--fk-surface-3); --bs-btn-hover-border-color: var(--fk-border); --bs-btn-hover-color: var(--fk-text-1); } /* neutralise destructive-looking cancel/back buttons that were red */ .btn.fk-btn-cancel { --bs-btn-bg: transparent; --bs-btn-border-color: var(--fk-border); --bs-btn-color: var(--fk-text-2); } /* ----------------------------------------------------------- Forms */ .form-label { font-weight: 600; color: var(--fk-text-1); margin-bottom: .5rem; font-size: var(--fk-fs-sm); } .form-control, .form-select { border-radius: var(--fk-radius-sm); border: 1.5px solid var(--fk-border); background-color: var(--fk-surface); color: var(--fk-text-1); transition: border-color .15s var(--fk-ease), box-shadow .15s var(--fk-ease); min-height: calc(1.5em + 1rem + 2px); } .form-control:focus, .form-select:focus { border-color: var(--fk-brand-400); box-shadow: 0 0 0 .2rem rgba(var(--fk-brand-rgb), .15); background-color: var(--fk-surface); } .form-control::placeholder { color: var(--fk-text-3); } .form-control-solid, .form-select-solid, .form-control.form-control-solid { background-color: var(--fk-surface-2) !important; border-color: var(--fk-surface-2) !important; color: var(--fk-text-1); } .form-control-solid:focus, .form-select-solid:focus { background-color: var(--fk-surface-3) !important; border-color: var(--fk-brand-400) !important; box-shadow: 0 0 0 .2rem rgba(var(--fk-brand-rgb), .12); } .input-group-text { border-radius: var(--fk-radius-sm); border: 1.5px solid var(--fk-border); background: var(--fk-surface-2); color: var(--fk-text-2); } .form-check-input:checked { background-color: var(--fk-brand-500); border-color: var(--fk-brand-500); } .form-check-input:focus { border-color: var(--fk-brand-400); box-shadow: 0 0 0 .2rem rgba(var(--fk-brand-rgb), .15); } .form-switch .form-check-input:checked { background-color: var(--fk-brand-500); } .form-text { color: var(--fk-text-3); font-size: var(--fk-fs-xs); } /* select2 (used app-wide) — match the form controls */ .select2-container--bootstrap5 .select2-selection, .select2-container .select2-selection--single, .select2-container .select2-selection--multiple { border-radius: var(--fk-radius-sm) !important; border: 1.5px solid var(--fk-border) !important; min-height: calc(1.5em + 1rem + 2px); } .select2-container--focus .select2-selection, .select2-container--open .select2-selection { border-color: var(--fk-brand-400) !important; box-shadow: 0 0 0 .2rem rgba(var(--fk-brand-rgb), .15) !important; } .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice, .select2-selection__choice { background: var(--fk-brand-50) !important; border: 1px solid rgba(var(--fk-brand-rgb), .25) !important; color: var(--fk-brand-700) !important; border-radius: var(--fk-radius-pill) !important; } .select2-results__option--highlighted { background: var(--fk-brand-500) !important; } /* ----------------------------------------------------------- Tables */ .table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--fk-surface-2); color: var(--fk-text-1); margin-bottom: 0; } .table > thead > tr > th, .table > thead th { font-size: var(--fk-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fk-text-3); border-bottom: 1px solid var(--fk-border); padding: .9rem 1rem; white-space: nowrap; } .table > tbody > tr > td { padding: .9rem 1rem; border-bottom: 1px solid var(--fk-border-2); vertical-align: middle; } .table > tbody > tr:last-child > td { border-bottom: 0; } .table-hover > tbody > tr { transition: background .12s var(--fk-ease); } .table-row-dashed > tbody > tr > td { border-bottom-style: dashed; } .table-responsive { border-radius: var(--fk-radius-sm); } /* ----------------------------------------------------------- Badges / status pills */ .badge { font-weight: 600; border-radius: var(--fk-radius-pill); padding: .4em .75em; letter-spacing: 0; } .badge.fk-pill { display: inline-flex; align-items: center; gap: .4em; } .fk-pill::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: currentColor; opacity: .9; } .badge-light-success, .fk-status-online { color: var(--fk-success); background: rgba(var(--fk-success-rgb), .12); } .badge-light-danger, .fk-status-offline { color: var(--fk-danger); background: rgba(var(--fk-danger-rgb), .12); } .badge-light-warning, .fk-status-locked { color: var(--fk-warning); background: rgba(var(--fk-warning-rgb), .12); } .badge-light-primary, .fk-status-processing { color: var(--fk-brand-600); background: var(--fk-brand-50); } .badge-light-info { color: var(--fk-info); background: rgba(var(--fk-info-rgb), .12); } /* ------------------------------------------------- Symbols / avatars */ .symbol > .symbol-label { background: var(--fk-surface-3); color: var(--fk-text-2); font-weight: 700; } .bg-light-warning { background: var(--fk-brand-50) !important; } .bg-light-primary { background: var(--fk-brand-50) !important; } /* ----------------------------------------------------------- Pagination */ .pagination { --bs-pagination-border-radius: var(--fk-radius-sm); gap: .25rem; } .page-link { border-radius: var(--fk-radius-sm) !important; border: 1px solid var(--fk-border); color: var(--fk-text-2); margin: 0; } .page-item.active .page-link { background-color: var(--fk-brand-500); border-color: var(--fk-brand-500); color: #fff; } .page-link:hover { background: var(--fk-brand-50); color: var(--fk-brand-700); border-color: var(--fk-brand-200); } /* ----------------------------------------------------------- Alerts / SweetAlert / toastr */ .swal2-popup { border-radius: var(--fk-radius) !important; font-family: 'Vazirmatn', sans-serif !important; } .swal2-styled.swal2-confirm { background-color: var(--fk-brand-500) !important; border-radius: var(--fk-radius-sm) !important; font-weight: 600; } .swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(var(--fk-brand-rgb), .35) !important; } #toast-container > .toast { border-radius: var(--fk-radius-sm) !important; box-shadow: var(--fk-shadow-lg) !important; opacity: 1; } .toast-success { background-color: var(--fk-success) !important; } .toast-error { background-color: var(--fk-danger) !important; } /* ====================================================================== */ /* ============================ APP SHELL =============================== */ /* ====================================================================== */ /* --- Sidebar --- */ .app-sidebar { background-color: var(--fk-sidebar-bg) !important; border-inline-end: 1px solid rgba(255,255,255,.04); } .app-sidebar-logo { background-color: var(--fk-sidebar-bg-2) !important; border-bottom: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; gap: .75rem; min-height: 64px; } .app-sidebar-logo a { display: flex; align-items: center; gap: .7rem; width: 100%; } .company-name-sidebar { font-weight: 700 !important; font-size: 1rem !important; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .company-logo-sidebar { height: 34px !important; width: 34px !important; border-radius: 10px !important; object-fit: cover; margin: 0 !important; } /* menu items */ .app-sidebar .menu .menu-item .menu-link { color: var(--fk-sidebar-text); border-radius: 10px; padding: .62rem .85rem; font-weight: 500; transition: background .15s var(--fk-ease), color .15s var(--fk-ease); } .app-sidebar .menu .menu-item .menu-link .menu-icon, .app-sidebar .menu .menu-item .menu-link .menu-icon .ki-duotone, .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet { color: var(--fk-sidebar-muted); } .app-sidebar .menu .menu-item .menu-link:hover, .app-sidebar .menu .menu-item.show > .menu-link { background: var(--fk-sidebar-hover); color: #fff; } .app-sidebar .menu .menu-item .menu-link:hover .menu-icon .ki-duotone { color: rgba(255,255,255,.85); } .app-sidebar .menu .menu-item .menu-link.active { background: var(--fk-sidebar-active); color: #fff; box-shadow: inset 3px 0 0 var(--fk-brand-500); } .app-sidebar .menu .menu-item .menu-link.active .menu-icon .ki-duotone, .app-sidebar .menu .menu-item .menu-link.active .bullet { color: var(--fk-brand-500) !important; } .app-sidebar .menu .menu-heading { color: var(--fk-sidebar-muted) !important; letter-spacing: .06em; font-size: .68rem !important; } .app-sidebar .menu .bullet-dot { background: var(--fk-sidebar-muted); } /* sidebar toggle pill */ .app-sidebar-toggle { background: var(--fk-surface) !important; box-shadow: var(--fk-shadow) !important; color: var(--fk-text-2) !important; } .app-sidebar-toggle:hover { color: var(--fk-brand-500) !important; } /* --- Header --- */ .app-header { background: var(--fk-surface); border-bottom: 1px solid var(--fk-border); box-shadow: var(--fk-shadow-sm); } .app-navbar .btn-icon:hover { color: var(--fk-brand-500); } .app-header .menu-item .menu-link span[style] { color: var(--fk-text-1); } /* brand label */ /* theme toggle: moon in light mode (=> go dark), sun in dark mode (=> go light) */ .fk-theme-toggle { color: var(--fk-text-2); transition: color .15s var(--fk-ease), background .15s var(--fk-ease); } .fk-theme-toggle:hover { color: var(--fk-brand-500); background: var(--fk-surface-2); } .fk-theme-toggle .fk-icon-light { display: none; } .fk-theme-toggle .fk-icon-dark { display: inline-block; } [data-bs-theme="dark"] .fk-theme-toggle .fk-icon-dark { display: none; } [data-bs-theme="dark"] .fk-theme-toggle .fk-icon-light { display: inline-block; } /* --- Page title / toolbar --- */ .page-title .page-heading { color: var(--fk-text-1) !important; font-weight: 700; font-size: var(--fk-fs-h2) !important; } .app-toolbar .breadcrumb { margin: 0; } .app-toolbar .breadcrumb-item, .app-toolbar .breadcrumb-item a { color: var(--fk-text-3); font-size: var(--fk-fs-sm); } .app-toolbar .breadcrumb-item a:hover { color: var(--fk-brand-500); } .app-toolbar .breadcrumb-item.active { color: var(--fk-text-2); } .app-toolbar .breadcrumb-item + .breadcrumb-item::before { color: var(--fk-text-3); } /* --- User dropdown menu --- */ .menu-sub-dropdown { border-radius: var(--fk-radius); box-shadow: var(--fk-shadow-lg); border: 1px solid var(--fk-border); } /* --- Generic dropdowns / modals --- */ .dropdown-menu { border-radius: var(--fk-radius-sm); box-shadow: var(--fk-shadow-lg); border: 1px solid var(--fk-border); padding: .35rem; } .dropdown-item { border-radius: 8px; font-weight: 500; } .dropdown-item:hover { background: var(--fk-surface-2); } .dropdown-item.text-danger:hover { background: rgba(var(--fk-danger-rgb), .1); } .modal-content { border-radius: var(--fk-radius); border: 1px solid var(--fk-border); box-shadow: var(--fk-shadow-lg); } .modal-header { border-bottom: 1px solid var(--fk-border-2); } .modal-footer { border-top: 1px solid var(--fk-border-2); } /* ----------------------------------------------------- Helpers / utilities */ .fk-page-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .fk-muted { color: var(--fk-text-3); } .bg-surface { background: var(--fk-surface) !important; } .bg-surface-2 { background: var(--fk-surface-2) !important; } .rounded-fk { border-radius: var(--fk-radius) !important; } .shadow-fk { box-shadow: var(--fk-shadow) !important; } .border-fk { border: 1px solid var(--fk-border) !important; } .border-dashed { border-style: dashed !important; } /* empty-state block */ .fk-empty { text-align: center; padding: 3rem 1rem; color: var(--fk-text-3); } .fk-empty .fk-empty-icon { font-size: 3rem; opacity: .35; margin-bottom: .75rem; } /* stat card */ .fk-stat { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; } .fk-stat-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; flex: 0 0 auto; } .fk-stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--fk-text-1); } .fk-stat-label { color: var(--fk-text-3); font-size: var(--fk-fs-sm); margin-top: .25rem; } /* keep text contrast in dark mode for theme's hardcoded text-dark */ [data-bs-theme="dark"] .text-dark { color: var(--fk-text-1) !important; } [data-bs-theme="dark"] .bg-light { background: var(--fk-surface-2) !important; } [data-bs-theme="dark"] .bg-white { background: var(--fk-surface) !important; } [data-bs-theme="dark"] .card { background: var(--fk-surface); } [data-bs-theme="dark"] .text-gray-800, [data-bs-theme="dark"] .text-gray-900 { color: var(--fk-text-1) !important; } /* --------------------------------------------- Resumable uploader (reusable) */ .fk-dropzone { position: relative; border: 2px dashed var(--fk-border); border-radius: var(--fk-radius); background: var(--fk-surface-2); padding: 2.5rem 1.5rem; text-align: center; cursor: pointer; transition: border-color .2s var(--fk-ease), background .2s var(--fk-ease), transform .2s var(--fk-ease); } .fk-dropzone:hover { border-color: var(--fk-brand-300); background: var(--fk-brand-50); } .fk-dropzone.fk-dragover { border-color: var(--fk-brand-500); background: var(--fk-brand-50); transform: scale(1.005); } .fk-dropzone-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 18px; display: grid; place-items: center; background: var(--fk-brand-50); color: var(--fk-brand-500); font-size: 1.7rem; } .fk-dropzone-title { font-weight: 700; color: var(--fk-text-1); font-size: 1.05rem; } .fk-dropzone-sub { color: var(--fk-text-3); font-size: var(--fk-fs-sm); margin-top: .25rem; } .fk-upload-row { display: flex; align-items: center; gap: 1rem; background: var(--fk-surface); border: 1px solid var(--fk-border); border-radius: var(--fk-radius-sm); padding: 1rem 1.1rem; margin-bottom: .75rem; } .fk-upload-thumb { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; background: var(--fk-brand-50); color: var(--fk-brand-500); font-size: 1.2rem; overflow: hidden; } .fk-upload-thumb img { width: 100%; height: 100%; object-fit: cover; } .fk-upload-main { flex: 1 1 auto; min-width: 0; } .fk-upload-name { font-weight: 600; color: var(--fk-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fk-upload-meta { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .35rem; } .fk-upload-meta small { color: var(--fk-text-3); font-size: var(--fk-fs-xs); } .fk-progress { height: 8px; background: var(--fk-surface-3); border-radius: 999px; overflow: hidden; margin-top: .5rem; } .fk-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--fk-brand-400), var(--fk-brand-600)); border-radius: 999px; transition: width .25s var(--fk-ease); } .fk-upload-row.is-done .fk-progress-bar { background: var(--fk-success); } .fk-upload-row.is-error .fk-progress-bar { background: var(--fk-danger); } .fk-upload-row.is-paused .fk-progress-bar { background: var(--fk-warning); opacity: .7; } .fk-upload-actions { display: flex; gap: .35rem; flex: 0 0 auto; } .fk-upload-status { font-size: var(--fk-fs-xs); font-weight: 600; } .is-done .fk-upload-status { color: var(--fk-success); } .is-error .fk-upload-status { color: var(--fk-danger); } .is-paused .fk-upload-status { color: var(--fk-warning); } /* ----------------------------------------------------- Inline media picker */ .fk-picker { width: 520px !important; max-width: 92vw; } .fk-picker .offcanvas-body { background: var(--fk-surface); } .fk-pick-crumbs { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; font-size: var(--fk-fs-sm); } .fk-crumb { color: var(--fk-text-3); padding: .15rem .4rem; border-radius: 6px; } .fk-crumb:hover { color: var(--fk-brand-600); background: var(--fk-brand-50); } .fk-crumb.active { color: var(--fk-text-1); font-weight: 600; } .fk-crumb-sep { color: var(--fk-text-3); } .fk-pick-tile { position: relative; border: 1.5px solid var(--fk-border); border-radius: var(--fk-radius-sm); overflow: hidden; cursor: pointer; transition: all .15s var(--fk-ease); background: var(--fk-surface); } .fk-pick-tile:hover { border-color: var(--fk-brand-300); transform: translateY(-2px); box-shadow: var(--fk-shadow); } .fk-pick-file.is-selected { border-color: var(--fk-brand-500); box-shadow: 0 0 0 3px rgba(var(--fk-brand-rgb), .18); } .fk-pick-thumb { height: 84px; display: grid; place-items: center; background: var(--fk-surface-2); color: var(--fk-text-3); font-size: 1.6rem; } .fk-pick-thumb img { width: 100%; height: 100%; object-fit: cover; } .fk-pick-folder .fk-pick-thumb { color: var(--fk-warning); } .fk-pick-name { padding: .4rem .5rem; font-size: var(--fk-fs-xs); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .fk-pick-check { position: absolute; top: 6px; inset-inline-end: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: var(--fk-brand-500); color: #fff; display: grid; place-items: center; font-size: .7rem; opacity: 0; transform: scale(.6); transition: all .15s var(--fk-ease); } .fk-pick-file.is-selected .fk-pick-check { opacity: 1; transform: scale(1); } /* ----------------------------------------------------- Auth (split-screen) */ .fk-auth { min-height: 100vh; background: var(--fk-bg); } .fk-auth-brand { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, #0d9488 0%, #0f766e 52%, #134e4a 100%); } .fk-auth-brand::after { content: ''; position: absolute; inset: 0; z-index: 1; opacity: .14; background-image: radial-gradient(circle at 1.5px 1.5px, #fff 1.5px, transparent 0); background-size: 26px 26px; } .fk-auth-brand-inner { position: relative; z-index: 2; max-width: 460px; } .fk-auth-wordmark { font-size: 2.6rem; font-weight: 800; color: #fff; letter-spacing: -.5px; } .fk-auth-sub { font-size: 1.05rem; opacity: .9; } .fk-auth-tagline { font-size: 1.5rem; font-weight: 700; margin-top: 1.5rem; } .fk-auth-feat { display: flex; align-items: center; gap: .6rem; opacity: .92; padding: .35rem 0; } .fk-auth-feat i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.16); font-size: .8rem; } .fk-auth-card { background: var(--fk-surface); border: 1px solid var(--fk-border); border-radius: var(--fk-radius-lg); box-shadow: var(--fk-shadow-lg); padding: 2.75rem 2.5rem; } .fk-auth-logo { height: 56px; } /* respect reduced motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }