/* * ============================================================ * SNOWMAN DESIGN — HELPDESK & BUG TRACKING SYSTEM * snowman.css | Unified Design System Stylesheet * Version 2.0 | March 2026 * ============================================================ * * Font Awesome 6 CDN — include in your HTML : * * * Table of Contents * --------------------------------------------------------- * 1. Google Fonts Import * 2. CSS Custom Properties (Design Tokens) * 3. CSS Reset & Base Styles * 4. Typography * 5. Authenticated Layout (Sidebar + Top Bar + Content) * 6. Unauthenticated Layout (Login / Auth Pages) * 7. Cards & Content Sections * 8. Stat / Summary Cards * 9. Buttons * 10. Form Elements * 11. Tables * 12. Filter / Search Bar * 13. Status Badges & Pills * 14. Info / Note Boxes * 15. Modal Overlay & Container * 16. Toast Notifications * 17. Breadcrumb Navigation * 18. Pagination * 19. Kanban Board * 20. Ticket Thread Layout * 21. SLA Indicators * 22. Utility Classes * 23. Responsive Breakpoints * ============================================================ */ /* ============================================================ 0. ALPINE.JS — PREVENT FLASH OF UNSTYLED CONTENT Must be at the top so it takes effect before Alpine loads. ============================================================ */ [x-cloak] { display: none !important; } /* ============================================================ 1. GOOGLE FONTS IMPORT ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap'); /* ============================================================ 2. CSS CUSTOM PROPERTIES (DESIGN TOKENS) ============================================================ */ :root { /* --- Core Colour Palette --- */ --color-navy: #1A2E4A; --color-navy-mid: #2C3E50; --color-navy-active: #243B55; --color-navy-hover: rgba(255, 255, 255, 0.08); --color-blue-primary: #2980D4; --color-blue-hover: #2171BE; --color-blue-light: #D6EAF8; --color-blue-lighter: #EBF5FB; --color-green: #28A745; --color-green-light: #D4EDDA; --color-green-hover: #218838; --color-red: #DC3545; --color-red-light: #F8D7DA; --color-red-hover: #C82333; --color-amber: #FFC107; --color-amber-light: #FFF3CD; --color-amber-dark: #856404; --color-teal: #1ABC9C; --color-teal-light: #D1F2EB; --color-teal-hover: #17A589; --color-grey-bg: #F4F6F8; --color-grey-border: #DEE2E6; --color-grey-light: #F8F9FA; --color-grey-mid: #ADB5BD; --color-grey-text: #6C757D; --color-disabled: #ADB5BD; --color-white: #FFFFFF; --color-body-text: #2D3748; --color-heading-text: #1A2E4A; --color-link: #2980D4; /* --- Layout Dimensions --- */ --sidebar-width: 200px; --topbar-height: 56px; --content-padding: 24px; /* --- Typography Scale --- */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Fira Code', Consolas, 'Courier New', monospace; --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.75rem; /* 12px */ --text-base: 0.8125rem; /* 13px */ --text-md: 0.875rem; /* 14px */ --text-lg: 1rem; /* 16px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.25rem; /* 20px */ --text-3xl: 1.5rem; /* 24px */ --line-height-tight: 1.25; --line-height-base: 1.5; --line-height-relaxed: 1.75; /* --- Shadows & Radii --- */ --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.20); --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.12); --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.15); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-full: 9999px; /* --- Transitions --- */ --transition-fast: 150ms ease; --transition-base: 220ms ease; --transition-slow: 350ms ease; /* --- Z-Index Stack --- */ --z-sidebar: 100; --z-topbar: 200; --z-dropdown: 300; --z-modal: 400; --z-toast: 500; } /* ============================================================ 3. CSS RESET & BASE STYLES ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-family); font-size: var(--text-base); font-weight: 400; line-height: var(--line-height-base); color: var(--color-body-text); background-color: var(--color-grey-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } a { color: var(--color-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-blue-hover); text-decoration: underline; } ul, ol { list-style: none; } hr { border: none; border-top: 1px solid var(--color-grey-border); margin: 16px 0; } /* ============================================================ 4. TYPOGRAPHY ============================================================ */ h1, .h1 { font-size: var(--text-3xl); font-weight: 700; color: var(--color-heading-text); line-height: var(--line-height-tight); } h2, .h2 { font-size: var(--text-2xl); font-weight: 600; color: var(--color-heading-text); line-height: var(--line-height-tight); } h3, .h3 { font-size: var(--text-xl); font-weight: 600; color: var(--color-heading-text); } h4, .h4 { font-size: var(--text-lg); font-weight: 600; color: var(--color-heading-text); } h5, .h5 { font-size: var(--text-md); font-weight: 600; color: var(--color-heading-text); } h6, .h6 { font-size: var(--text-base); font-weight: 600; color: var(--color-heading-text); } p { margin-bottom: 0.75rem; font-size: var(--text-base); line-height: var(--line-height-relaxed); } p:last-child { margin-bottom: 0; } .text-muted { color: var(--color-grey-text); font-size: var(--text-sm); } .text-small { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); } code, pre, .mono { font-family: var(--font-mono); font-size: var(--text-base); color: var(--color-navy); } code { background-color: var(--color-grey-light); border: 1px solid var(--color-grey-border); border-radius: var(--radius-sm); padding: 2px 6px; } pre { background-color: var(--color-grey-light); border: 1px solid var(--color-grey-border); border-radius: var(--radius-md); padding: 16px; overflow-x: auto; } /* ============================================================ 5. AUTHENTICATED LAYOUT ============================================================ */ /* --- App Shell Wrapper --- */ .app-shell { display: flex; min-height: 100vh; } /* ---- Sidebar ---- */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; background-color: var(--color-navy); display: flex; flex-direction: column; z-index: var(--z-sidebar); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.15); border-radius: var(--radius-full); } /* Sidebar Brand / Logo Area */ .sidebar-brand { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; } .sidebar-brand-logo { display: block; max-width: 140px; margin-bottom: 6px; } .sidebar-brand-name { font-size: var(--text-sm); font-weight: 700; color: var(--color-white); line-height: 1.3; margin-bottom: 8px; } .sidebar-role-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-white); background-color: rgba(255, 255, 255, 0.15); border-radius: var(--radius-full); padding: 2px 8px; } /* Sidebar Navigation */ .sidebar-nav { flex: 1; padding: 8px 0; } .sidebar-nav-section-label { display: block; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.45); padding: 16px 20px 4px; cursor: default; user-select: none; pointer-events: none; } .sidebar-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: var(--text-base); font-weight: 500; color: rgba(255, 255, 255, 0.88); text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast); border-left: 3px solid transparent; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-nav-item:hover { background-color: var(--color-navy-hover); color: var(--color-white); text-decoration: none; } .sidebar-nav-item.active, .sidebar-nav-item[aria-current="page"] { background-color: var(--color-navy-active); border-left-color: var(--color-blue-primary); color: var(--color-white); } .sidebar-nav-item .nav-icon { font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; opacity: 0.85; } .sidebar-nav-item.active .nav-icon, .sidebar-nav-item:hover .nav-icon { opacity: 1; } /* Sidebar Badge (notification count) */ .sidebar-nav-item .nav-badge { margin-left: auto; background-color: var(--color-blue-primary); color: var(--color-white); font-size: 10px; font-weight: 700; border-radius: var(--radius-full); padding: 1px 6px; min-width: 18px; text-align: center; flex-shrink: 0; } /* Sidebar Footer (user info) */ .sidebar-footer { padding: 12px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; } .sidebar-footer-user { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-footer-user i { margin-right: 6px; font-size: 13px; } /* Mobile hamburger toggle (hidden on desktop) */ .sidebar-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--color-navy); font-size: 20px; } /* Sidebar backdrop (mobile) */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: calc(var(--z-sidebar) - 1); } .sidebar-backdrop.visible { display: block; } /* ---- Top Bar ---- */ .topbar { position: fixed; top: 0; left: var(--sidebar-width); right: 0; height: var(--topbar-height); background-color: var(--color-white); border-bottom: 1px solid var(--color-grey-border); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--content-padding); z-index: var(--z-topbar); gap: 16px; } .topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .topbar-page-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-heading-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .topbar-user { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-grey-text); white-space: nowrap; } .topbar-user-name { font-weight: 500; color: var(--color-body-text); } /* ---- Main Content Area ---- */ .main-content { margin-left: var(--sidebar-width); padding-top: var(--topbar-height); min-height: 100vh; background-color: var(--color-grey-bg); flex: 1; min-width: 0; } .page-content { padding: var(--content-padding); } /* Page Heading Row */ .page-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .page-heading-title { font-size: var(--text-2xl); font-weight: 700; color: var(--color-heading-text); line-height: var(--line-height-tight); } .page-heading-subtitle { font-size: var(--text-sm); color: var(--color-grey-text); margin-top: 2px; } .page-heading-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ============================================================ 6. UNAUTHENTICATED LAYOUT (LOGIN / AUTH PAGES) ============================================================ */ .auth-page { min-height: 100vh; background: radial-gradient(ellipse at 30% 40%, var(--color-navy-mid) 0%, var(--color-navy) 65%); display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card { background-color: var(--color-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); width: 100%; max-width: 440px; padding: 40px; } .auth-card-logo { display: block; max-width: 160px; margin: 0 auto 16px; } .auth-card-title { text-align: center; font-size: var(--text-xl); font-weight: 700; color: var(--color-heading-text); margin-bottom: 4px; } .auth-card-subtitle { text-align: center; font-size: var(--text-sm); color: var(--color-grey-text); margin-bottom: 28px; } .auth-card-divider { border: none; border-top: 1px solid var(--color-grey-border); margin: 24px 0; } .auth-forgot-link { display: block; text-align: right; font-size: var(--text-sm); color: var(--color-blue-primary); margin-top: -8px; margin-bottom: 16px; } .auth-footer-text { text-align: center; font-size: var(--text-sm); color: var(--color-grey-text); margin-top: 20px; } /* ============================================================ 7. CARDS & CONTENT SECTIONS ============================================================ */ .card { background-color: var(--color-white); border-radius: var(--radius-md); border: 1px solid var(--color-grey-border); box-shadow: var(--shadow-card); margin-bottom: 20px; } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-grey-border); gap: 12px; } .card-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .card-header-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background-color: var(--color-blue-light); color: var(--color-blue-primary); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .card-header-title { font-size: var(--text-md); font-weight: 600; color: var(--color-heading-text); } .card-header-subtitle { font-size: var(--text-sm); color: var(--color-grey-text); } .card-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .card-body { padding: 24px; } .card-body-sm { padding: 16px 20px; } .card-footer { padding: 14px 20px; border-top: 1px solid var(--color-grey-border); background-color: var(--color-grey-light); border-radius: 0 0 var(--radius-md) var(--radius-md); display: flex; align-items: center; justify-content: flex-end; gap: 8px; } /* Two-column page layout (e.g. ticket detail) */ .page-layout-two-col { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; } .page-layout-main { min-width: 0; } .page-layout-sidebar { min-width: 0; } /* ============================================================ 8. STAT / SUMMARY CARDS ============================================================ */ .stat-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; } .stat-card { background-color: var(--color-white); border-radius: var(--radius-md); border: 1px solid var(--color-grey-border); box-shadow: var(--shadow-card); padding: 20px; display: flex; align-items: flex-start; gap: 14px; border-left: 4px solid var(--color-grey-border); transition: box-shadow var(--transition-base), transform var(--transition-base); } .stat-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); } .stat-card--blue { border-left-color: var(--color-blue-primary); } .stat-card--green { border-left-color: var(--color-green); } .stat-card--red { border-left-color: var(--color-red); } .stat-card--amber { border-left-color: var(--color-amber); } .stat-card--teal { border-left-color: var(--color-teal); } .stat-card--navy { border-left-color: var(--color-navy); } .stat-card--grey { border-left-color: var(--color-grey-mid); } .stat-card-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .stat-card--blue .stat-card-icon { background-color: var(--color-blue-light); color: var(--color-blue-primary); } .stat-card--green .stat-card-icon { background-color: var(--color-green-light); color: var(--color-green); } .stat-card--red .stat-card-icon { background-color: var(--color-red-light); color: var(--color-red); } .stat-card--amber .stat-card-icon { background-color: var(--color-amber-light); color: var(--color-amber-dark); } .stat-card--teal .stat-card-icon { background-color: var(--color-teal-light); color: var(--color-teal); } .stat-card--navy .stat-card-icon { background-color: var(--color-blue-light); color: var(--color-navy); } .stat-card--grey .stat-card-icon { background-color: var(--color-grey-light); color: var(--color-grey-mid); } .stat-card-content { flex: 1; min-width: 0; } .stat-card-value { font-size: var(--text-3xl); font-weight: 700; color: var(--color-heading-text); line-height: 1; margin-bottom: 4px; } .stat-card-label { font-size: var(--text-sm); color: var(--color-grey-text); font-weight: 400; } .stat-card-delta { font-size: var(--text-xs); font-weight: 600; margin-top: 4px; } .stat-card-delta--up { color: var(--color-green); } .stat-card-delta--down { color: var(--color-red); } /* ============================================================ 9. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 16px; font-family: var(--font-family); font-size: var(--text-base); font-weight: 500; line-height: 1.4; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); user-select: none; vertical-align: middle; } .btn:focus-visible { outline: 3px solid rgba(41, 128, 212, 0.4); outline-offset: 2px; } .btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .btn-sm { padding: 5px 11px; font-size: var(--text-sm); gap: 5px; } .btn-lg { padding: 11px 22px; font-size: var(--text-md); gap: 9px; } .btn-xl { padding: 14px 28px; font-size: var(--text-lg); width: 100%; } /* Primary (Blue) */ .btn-primary { background-color: var(--color-blue-primary); border-color: var(--color-blue-primary); color: var(--color-white); } .btn-primary:hover { background-color: var(--color-blue-hover); border-color: var(--color-blue-hover); color: var(--color-white); text-decoration: none; } /* Secondary (Grey) */ .btn-secondary { background-color: var(--color-grey-light); border-color: var(--color-grey-border); color: var(--color-body-text); } .btn-secondary:hover { background-color: #e2e6ea; border-color: #c8cdd2; color: var(--color-body-text); text-decoration: none; } /* Success (Green) */ .btn-success { background-color: var(--color-green); border-color: var(--color-green); color: var(--color-white); } .btn-success:hover { background-color: var(--color-green-hover); border-color: var(--color-green-hover); color: var(--color-white); text-decoration: none; } /* Danger (Red) */ .btn-danger { background-color: var(--color-red); border-color: var(--color-red); color: var(--color-white); } .btn-danger:hover { background-color: var(--color-red-hover); border-color: var(--color-red-hover); color: var(--color-white); text-decoration: none; } /* Warning (Amber) */ .btn-warning { background-color: var(--color-amber); border-color: var(--color-amber); color: var(--color-amber-dark); } .btn-warning:hover { background-color: #e0a800; border-color: #d39e00; color: var(--color-amber-dark); text-decoration: none; } /* Dark (Navy-Mid) */ .btn-dark { background-color: var(--color-navy-mid); border-color: var(--color-navy-mid); color: var(--color-white); } .btn-dark:hover { background-color: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); text-decoration: none; } /* Ghost / Outline */ .btn-ghost { background-color: transparent; border-color: var(--color-grey-border); color: var(--color-body-text); } .btn-ghost:hover { background-color: var(--color-grey-light); text-decoration: none; } .btn-outline-primary { background-color: transparent; border-color: var(--color-blue-primary); color: var(--color-blue-primary); } .btn-outline-primary:hover { background-color: var(--color-blue-primary); color: var(--color-white); text-decoration: none; } .btn-outline-danger { background-color: transparent; border-color: var(--color-red); color: var(--color-red); } .btn-outline-danger:hover { background-color: var(--color-red); color: var(--color-white); text-decoration: none; } /* Icon-only Table Action Buttons */ .btn-icon { padding: 5px 7px; font-size: 13px; border-radius: var(--radius-sm); line-height: 1; border: 1px solid transparent; background: none; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } .btn-icon-view { color: var(--color-blue-primary); } .btn-icon-edit { color: var(--color-amber-dark); } .btn-icon-delete { color: var(--color-red); } .btn-icon-teal { color: var(--color-teal); } .btn-icon:hover { background-color: var(--color-grey-light); border-color: var(--color-grey-border); text-decoration: none; } .btn-icon-view:hover { color: var(--color-blue-hover); } .btn-icon-edit:hover { color: #a07800; } .btn-icon-delete:hover { color: var(--color-red-hover); } /* ============================================================ 10. FORM ELEMENTS ============================================================ */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-body-text); margin-bottom: 6px; } .form-label .required { color: var(--color-red); margin-left: 2px; } .form-control { display: block; width: 100%; padding: 8px 12px; font-family: var(--font-family); font-size: var(--text-base); font-weight: 400; color: var(--color-body-text); background-color: var(--color-white); border: 1px solid var(--color-grey-border); border-radius: var(--radius-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); appearance: none; line-height: 1.5; } .form-control::placeholder { color: var(--color-grey-mid); } .form-control:hover { border-color: #b5bcc5; } .form-control:focus { outline: none; border-color: var(--color-blue-primary); box-shadow: 0 0 0 3px rgba(41, 128, 212, 0.18); background-color: var(--color-blue-lighter); } .form-control:disabled, .form-control[readonly] { background-color: var(--color-grey-light); color: var(--color-grey-text); cursor: not-allowed; opacity: 0.7; } .form-control.is-invalid { border-color: var(--color-red); box-shadow: none; } .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18); } .form-control.is-valid { border-color: var(--color-green); } /* Select */ select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236C757D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; padding-right: 32px; cursor: pointer; } /* Textarea */ textarea.form-control { resize: vertical; min-height: 100px; } /* Input group (icon prefix/suffix) */ .input-group { display: flex; align-items: stretch; position: relative; } .input-group .form-control { flex: 1; min-width: 0; } .input-group-prefix, .input-group-suffix { display: flex; align-items: center; padding: 0 12px; background-color: var(--color-grey-light); border: 1px solid var(--color-grey-border); color: var(--color-grey-text); font-size: var(--text-sm); white-space: nowrap; } .input-group-prefix { border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .input-group-suffix { border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .input-group .form-control:not(:first-child) { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .input-group .form-control:not(:last-child) { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } /* Checkbox & Radio */ .form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer; } .form-check-input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-blue-primary); cursor: pointer; } .form-check-label { font-size: var(--text-base); color: var(--color-body-text); cursor: pointer; user-select: none; } /* Help / validation text */ .form-help { display: block; font-size: var(--text-sm); color: var(--color-grey-text); margin-top: 4px; } .form-error { display: block; font-size: var(--text-sm); color: var(--color-red); margin-top: 4px; } .form-valid { display: block; font-size: var(--text-sm); color: var(--color-green); margin-top: 4px; } /* Form grid rows */ .form-row { display: grid; gap: 16px; } .form-row-2 { grid-template-columns: 1fr 1fr; } .form-row-3 { grid-template-columns: 1fr 1fr 1fr; } .form-row-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } .form-section-title { font-size: var(--text-md); font-weight: 600; color: var(--color-heading-text); padding-bottom: 10px; border-bottom: 1px solid var(--color-grey-border); margin-bottom: 18px; margin-top: 8px; } /* ============================================================ 11. TABLES ============================================================ */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); } table, .data-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); } .data-table thead { background-color: var(--color-navy); } .data-table thead th { padding: 11px 14px; font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-white); text-align: left; white-space: nowrap; border-bottom: none; } .data-table thead th:first-child { border-radius: var(--radius-md) 0 0 0; } .data-table thead th:last-child { border-radius: 0 var(--radius-md) 0 0; } .data-table thead th .sort-icon { margin-left: 5px; opacity: 0.6; font-size: 11px; } .data-table thead th.sortable { cursor: pointer; user-select: none; } .data-table thead th.sortable:hover { background-color: rgba(255,255,255,0.08); } .data-table tbody tr { border-bottom: 1px solid var(--color-grey-border); transition: background-color var(--transition-fast); } .data-table tbody tr:nth-child(even) { background-color: #FAFBFC; } .data-table tbody tr:last-child { border-bottom: none; } .data-table tbody tr:hover { background-color: var(--color-blue-lighter) !important; } .data-table tbody tr.row-selected { background-color: var(--color-blue-light) !important; } .data-table tbody tr.row-highlighted { background-color: #FFFBEB !important; } .data-table tbody td { padding: 11px 14px; color: var(--color-body-text); vertical-align: middle; } .data-table tbody td.cell-link { color: var(--color-blue-primary); font-weight: 500; cursor: pointer; } .data-table tbody td.cell-link:hover { color: var(--color-blue-hover); text-decoration: underline; } .data-table tbody td.cell-actions { white-space: nowrap; width: 1%; } .data-table .col-checkbox { width: 36px; text-align: center; } /* Table empty state */ .table-empty { text-align: center; padding: 40px 20px; color: var(--color-grey-text); } .table-empty i { font-size: 32px; opacity: 0.3; display: block; margin-bottom: 10px; } /* Bulk action bar */ .bulk-action-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background-color: var(--color-blue-light); border: 1px solid var(--color-blue-primary); border-radius: var(--radius-sm); margin-bottom: 10px; flex-wrap: wrap; } .bulk-action-bar-count { font-size: var(--text-sm); font-weight: 600; color: var(--color-blue-primary); } /* ============================================================ 12. FILTER / SEARCH BAR ============================================================ */ .filter-bar { background-color: var(--color-white); border-radius: var(--radius-md); border: 1px solid var(--color-grey-border); box-shadow: var(--shadow-card); padding: 16px 20px; margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .filter-bar-group { display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex: 1; } .filter-bar-group label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-grey-text); } .filter-bar-group.filter-search { flex: 2; min-width: 200px; } .filter-bar-actions { display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0; padding-bottom: 1px; } .filter-bar-count { font-size: var(--text-sm); color: var(--color-grey-text); white-space: nowrap; align-self: center; } /* ============================================================ 13. STATUS BADGES & PILLS ============================================================ */ .badge { display: inline-block; padding: 3px 8px; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-radius: var(--radius-sm); white-space: nowrap; line-height: 1.4; vertical-align: middle; } /* Colour variants */ .badge-success, .badge-active, .badge-open, .badge-resolved, .badge-delivered { background-color: var(--color-green); color: var(--color-white); } .badge-primary, .badge-info, .badge-new, .badge-in-progress, .badge-customer { background-color: var(--color-blue-primary); color: var(--color-white); } .badge-warning, .badge-awaiting, .badge-on-hold, .badge-pending { background-color: var(--color-amber); color: var(--color-amber-dark); } .badge-danger, .badge-critical, .badge-breached, .badge-closed-neg { background-color: var(--color-red); color: var(--color-white); } .badge-dark, .badge-neutral, .badge-admin, .badge-agent, .badge-deferred { background-color: var(--color-navy-mid); color: var(--color-white); } .badge-teal, .badge-enhancement, .badge-under-review { background-color: var(--color-teal); color: var(--color-white); } .badge-disabled, .badge-inactive { background-color: var(--color-disabled); color: var(--color-white); } /* Pill shape */ .badge-pill { border-radius: var(--radius-full); } /* Priority dot badges */ .badge-dot { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; white-space: nowrap; } .badge-dot::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .badge-dot.priority-critical { background-color: var(--color-red-light); color: var(--color-red); } .badge-dot.priority-critical::before { background-color: var(--color-red); } .badge-dot.priority-high { background-color: #FDE8CE; color: #B35A00; } .badge-dot.priority-high::before { background-color: #E07800; } .badge-dot.priority-medium { background-color: var(--color-amber-light); color: var(--color-amber-dark); } .badge-dot.priority-medium::before { background-color: var(--color-amber); } .badge-dot.priority-low { background-color: var(--color-blue-light); color: var(--color-blue-primary); } .badge-dot.priority-low::before { background-color: var(--color-blue-primary); } /* ============================================================ 14. INFO / NOTE BOXES ============================================================ */ .info-box { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); border-left: 4px solid transparent; margin-bottom: 16px; font-size: var(--text-base); line-height: var(--line-height-relaxed); } .info-box .info-box-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; } .info-box .info-box-content { flex: 1; min-width: 0; } .info-box .info-box-title { font-weight: 600; margin-bottom: 3px; } .info-box-teal { background-color: var(--color-teal-light); border-left-color: var(--color-teal); color: #0e7a63; } .info-box-teal .info-box-icon { color: var(--color-teal); } .info-box-blue { background-color: var(--color-blue-light); border-left-color: var(--color-blue-primary); color: #1a5c94; } .info-box-blue .info-box-icon { color: var(--color-blue-primary); } .info-box-amber { background-color: var(--color-amber-light); border-left-color: var(--color-amber); color: var(--color-amber-dark); } .info-box-amber .info-box-icon { color: #d9a000; } .info-box-red { background-color: var(--color-red-light); border-left-color: var(--color-red); color: #8c1c27; } .info-box-red .info-box-icon { color: var(--color-red); } .info-box-green { background-color: var(--color-green-light); border-left-color: var(--color-green); color: #155724; } .info-box-green .info-box-icon { color: var(--color-green); } /* ============================================================ 15. MODAL OVERLAY & CONTAINER ============================================================ */ .modal-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.50); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: 20px; overflow-y: auto; } /* Alpine.js x-cloak helper */ [x-cloak] { display: none !important; } .modal-container { background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); width: 100%; max-width: 560px; display: flex; flex-direction: column; max-height: calc(100vh - 40px); overflow: hidden; animation: modalSlideIn 0.2s ease; } .modal-container--wide { max-width: 800px; } .modal-container--sm { max-width: 420px; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; background-color: var(--color-navy); flex-shrink: 0; gap: 12px; } .modal-title { font-size: var(--text-lg); font-weight: 600; color: var(--color-white); } .modal-close { background: none; border: none; cursor: pointer; color: rgba(255, 255, 255, 0.70); font-size: 18px; padding: 4px 6px; border-radius: var(--radius-sm); transition: color var(--transition-fast), background-color var(--transition-fast); line-height: 1; } .modal-close:hover { color: var(--color-white); background-color: rgba(255, 255, 255, 0.12); } .modal-body { padding: 24px; overflow-y: auto; flex: 1; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--color-grey-border); background-color: var(--color-grey-light); flex-shrink: 0; flex-wrap: wrap; } /* ============================================================ 16. TOAST NOTIFICATIONS ============================================================ */ .toast-container { position: fixed; top: calc(var(--topbar-height) + 12px); right: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 360px; width: calc(100% - 32px); } .toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-toast); pointer-events: all; animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; border-left: 4px solid transparent; background-color: var(--color-white); min-width: 280px; } .toast.toast-dismiss { animation: toastSlideOut 0.25s ease forwards; } @keyframes toastSlideIn { from { opacity: 0; transform: translateX(calc(100% + 16px)); } to { opacity: 1; transform: translateX(0); } } @keyframes toastSlideOut { from { opacity: 1; transform: translateX(0); max-height: 200px; } to { opacity: 0; transform: translateX(calc(100% + 16px)); max-height: 0; } } .toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .toast-content { flex: 1; min-width: 0; } .toast-title { font-size: var(--text-md); font-weight: 600; margin-bottom: 2px; } .toast-message { font-size: var(--text-sm); line-height: 1.45; color: var(--color-grey-text); } .toast-close { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--color-grey-mid); padding: 2px 4px; border-radius: var(--radius-sm); flex-shrink: 0; transition: color var(--transition-fast); line-height: 1; } .toast-close:hover { color: var(--color-body-text); } .toast-success { border-left-color: var(--color-green); } .toast-success .toast-icon, .toast-success .toast-title { color: var(--color-green); } .toast-error { border-left-color: var(--color-red); } .toast-error .toast-icon, .toast-error .toast-title { color: var(--color-red); } .toast-warning { border-left-color: var(--color-amber); } .toast-warning .toast-icon { color: #d9a000; } .toast-warning .toast-title { color: var(--color-amber-dark); } .toast-info { border-left-color: var(--color-blue-primary); } .toast-info .toast-icon, .toast-info .toast-title { color: var(--color-blue-primary); } /* ============================================================ 17. BREADCRUMB NAVIGATION ============================================================ */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-bottom: 16px; padding: 0; list-style: none; } .breadcrumb-item { display: flex; align-items: center; font-size: var(--text-sm); color: var(--color-grey-text); } .breadcrumb-item a { color: var(--color-blue-primary); text-decoration: none; transition: color var(--transition-fast); } .breadcrumb-item a:hover { color: var(--color-blue-hover); text-decoration: underline; } .breadcrumb-item.active { color: var(--color-body-text); font-weight: 500; } .breadcrumb-item + .breadcrumb-item::before { content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 9px; color: var(--color-grey-mid); margin: 0 8px; display: inline-block; } /* ============================================================ 18. PAGINATION ============================================================ */ .pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--color-grey-border); } .pagination-info { font-size: var(--text-sm); color: var(--color-grey-text); } .pagination-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .pagination-links li a, .pagination-links li span, .page-link { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; font-size: var(--text-sm); font-weight: 500; border: 1px solid var(--color-grey-border); border-radius: var(--radius-sm); color: var(--color-body-text); text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); cursor: pointer; user-select: none; } .pagination-links li a:hover, .page-link:hover { background-color: var(--color-grey-light); border-color: var(--color-grey-mid); text-decoration: none; } .pagination-links li.active a, .pagination-links li.active span, .page-link.active { background-color: var(--color-blue-primary); border-color: var(--color-blue-primary); color: var(--color-white); } .pagination-links li.disabled a, .pagination-links li.disabled span, .page-link.disabled { color: var(--color-grey-mid); pointer-events: none; cursor: default; } /* ============================================================ 19. KANBAN BOARD ============================================================ */ .kanban-board { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; padding-bottom: 16px; -webkit-overflow-scrolling: touch; } .kanban-column { flex-shrink: 0; width: 280px; background-color: var(--color-grey-light); border-radius: var(--radius-md); border: 1px solid var(--color-grey-border); display: flex; flex-direction: column; max-height: calc(100vh - var(--topbar-height) - var(--content-padding) * 2 - 60px); } .kanban-column-header { padding: 12px 14px; border-bottom: 1px solid var(--color-grey-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; border-top: 3px solid transparent; } .kanban-column--backlog .kanban-column-header { border-top-color: var(--color-grey-mid); } .kanban-column--todo .kanban-column-header { border-top-color: var(--color-blue-primary); } .kanban-column--progress .kanban-column-header { border-top-color: var(--color-amber); } .kanban-column--review .kanban-column-header { border-top-color: var(--color-teal); } .kanban-column--done .kanban-column-header { border-top-color: var(--color-green); } .kanban-column--closed .kanban-column-header { border-top-color: var(--color-red); } .kanban-column--deferred .kanban-column-header { border-top-color: var(--color-navy-mid); } .kanban-column-title { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-heading-text); } .kanban-column-count { background-color: var(--color-grey-border); color: var(--color-grey-text); font-size: 11px; font-weight: 700; border-radius: var(--radius-full); padding: 1px 7px; min-width: 22px; text-align: center; } .kanban-column-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: var(--color-grey-border) transparent; } .kanban-card { background-color: var(--color-white); border: 1px solid var(--color-grey-border); border-radius: var(--radius-sm); padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); cursor: grab; transition: box-shadow var(--transition-fast), transform var(--transition-fast); user-select: none; } .kanban-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); } .kanban-card.dragging { opacity: 0.5; cursor: grabbing; box-shadow: var(--shadow-modal); transform: rotate(1.5deg) scale(1.02); } .kanban-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .kanban-card-id { font-size: var(--text-xs); font-weight: 600; color: var(--color-grey-text); white-space: nowrap; } .kanban-card-title { font-size: var(--text-sm); font-weight: 500; color: var(--color-body-text); line-height: 1.4; margin-bottom: 8px; } .kanban-card-title a { color: inherit; text-decoration: none; } .kanban-card-title a:hover { color: var(--color-blue-primary); text-decoration: none; } .kanban-card-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .kanban-card-product { font-size: var(--text-xs); color: var(--color-grey-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .kanban-card-assignee { width: 24px; height: 24px; border-radius: 50%; background-color: var(--color-blue-light); color: var(--color-blue-primary); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kanban-drop-target { border: 2px dashed var(--color-blue-primary); background-color: var(--color-blue-lighter); border-radius: var(--radius-sm); min-height: 60px; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); color: var(--color-blue-primary); } /* ============================================================ 20. TICKET THREAD LAYOUT ============================================================ */ .ticket-thread { display: flex; flex-direction: column; gap: 0; } .reply-item { display: flex; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--color-grey-border); } .reply-item:last-child { border-bottom: none; } /* Internal note */ .reply-item--internal { background-color: #FFFDF0; border-left: 3px solid var(--color-amber); padding-left: 16px; padding-right: 16px; margin-left: -1px; margin-right: -1px; } .reply-item--internal .reply-header-note-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; color: var(--color-amber-dark); background-color: var(--color-amber-light); padding: 2px 7px; border-radius: var(--radius-full); } /* System / audit event */ .reply-item--system { background-color: transparent; gap: 8px; padding: 10px 0; } .reply-item--system .reply-avatar { width: 28px; height: 28px; background-color: var(--color-grey-light); color: var(--color-grey-text); } .reply-item--system .reply-body { font-size: var(--text-sm); color: var(--color-grey-text); font-style: italic; } /* Avatar */ .reply-avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--color-navy); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; text-transform: uppercase; user-select: none; } .reply-avatar--agent { background-color: var(--color-navy); } .reply-avatar--customer { background-color: var(--color-blue-primary); } .reply-avatar--system { background-color: var(--color-grey-light); color: var(--color-grey-text); } .reply-content { flex: 1; min-width: 0; } .reply-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .reply-author { font-size: var(--text-md); font-weight: 600; color: var(--color-heading-text); } .reply-role-badge { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; color: rgba(255,255,255,0.9); background-color: var(--color-navy-mid); padding: 1px 6px; border-radius: var(--radius-sm); } .reply-timestamp { font-size: var(--text-sm); color: var(--color-grey-text); margin-left: auto; white-space: nowrap; } .reply-body { font-size: var(--text-base); color: var(--color-body-text); line-height: var(--line-height-relaxed); } .reply-body p:last-child { margin-bottom: 0; } /* Attachments in thread */ .reply-attachments { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } .reply-attachment-item { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background-color: var(--color-grey-light); border: 1px solid var(--color-grey-border); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-body-text); text-decoration: none; transition: background-color var(--transition-fast); } .reply-attachment-item:hover { background-color: var(--color-blue-light); border-color: var(--color-blue-primary); color: var(--color-blue-primary); text-decoration: none; } .reply-attachment-item i { font-size: 14px; color: var(--color-blue-primary); } .reply-attachment-size { color: var(--color-grey-text); font-size: var(--text-xs); } /* Reply composer */ .reply-composer { border: 1px solid var(--color-grey-border); border-radius: var(--radius-md); overflow: hidden; } .reply-composer-tabs { display: flex; border-bottom: 1px solid var(--color-grey-border); background-color: var(--color-grey-light); } .reply-composer-tab { padding: 10px 20px; font-size: var(--text-sm); font-weight: 500; color: var(--color-grey-text); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .reply-composer-tab.active { color: var(--color-blue-primary); border-bottom-color: var(--color-blue-primary); background-color: var(--color-white); } .reply-composer-tab.tab-internal.active { color: var(--color-amber-dark); border-bottom-color: var(--color-amber); } .reply-composer-body { padding: 16px; background-color: var(--color-white); } .reply-composer-footer { padding: 12px 16px; border-top: 1px solid var(--color-grey-border); background-color: var(--color-grey-light); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .reply-composer-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Collision detection warning */ .collision-warning { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background-color: var(--color-amber-light); border: 1px solid var(--color-amber); border-radius: var(--radius-sm); margin-bottom: 12px; font-size: var(--text-sm); color: var(--color-amber-dark); } /* ============================================================ 21. SLA INDICATORS ============================================================ */ .sla-indicator { display: flex; align-items: center; gap: 10px; } .sla-bar-wrapper { flex: 1; height: 6px; background-color: var(--color-grey-border); border-radius: var(--radius-full); overflow: hidden; } .sla-bar { height: 100%; border-radius: var(--radius-full); transition: width 0.4s ease; } .sla-bar--green { background-color: var(--color-green); } .sla-bar--amber { background-color: var(--color-amber); } .sla-bar--red { background-color: var(--color-red); } .sla-label { font-size: var(--text-xs); font-weight: 600; white-space: nowrap; flex-shrink: 0; } .sla-label--green { color: var(--color-green); } .sla-label--amber { color: var(--color-amber-dark); } .sla-label--red { color: var(--color-red); } .sla-label--breached { color: var(--color-red); text-transform: uppercase; letter-spacing: 0.04em; } /* Compact SLA badge for table rows */ .sla-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 600; padding: 3px 8px; border-radius: var(--radius-sm); white-space: nowrap; } .sla-badge--ok { background-color: var(--color-green-light); color: var(--color-green); } .sla-badge--warning { background-color: var(--color-amber-light); color: var(--color-amber-dark); } .sla-badge--breached { background-color: var(--color-red-light); color: var(--color-red); animation: sla-pulse 2s ease-in-out infinite; } @keyframes sla-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } /* SLA alert panel */ .sla-alert-list { display: flex; flex-direction: column; gap: 0; } .sla-alert-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--color-grey-border); flex-wrap: wrap; } .sla-alert-row:last-child { border-bottom: none; } .sla-alert-ticket { font-size: var(--text-sm); font-weight: 600; color: var(--color-blue-primary); white-space: nowrap; min-width: 80px; } .sla-alert-subject { flex: 1; font-size: var(--text-sm); color: var(--color-body-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sla-alert-time { font-size: var(--text-xs); font-weight: 600; flex-shrink: 0; } .sla-alert-row--warning .sla-alert-time { color: var(--color-amber-dark); } .sla-alert-row--breached .sla-alert-time { color: var(--color-red); } /* ============================================================ 22. UTILITY CLASSES ============================================================ */ .d-flex { display: flex; } .d-block { display: block; } .d-inline { display: inline; } .d-none { display: none; } .d-grid { display: grid; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .flex-shrink-0 { flex-shrink: 0; } .align-center { align-items: center; } .align-start { align-items: flex-start; } .align-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .text-navy { color: var(--color-navy); } .text-primary { color: var(--color-blue-primary); } .text-success { color: var(--color-green); } .text-danger { color: var(--color-red); } .text-warning { color: var(--color-amber-dark); } .text-teal { color: var(--color-teal); } .text-muted { color: var(--color-grey-text); } .text-white { color: var(--color-white); } .mt-0 { margin-top: 0; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; } .p-0 { padding: 0; } .p-8 { padding: 8px; } .p-12 { padding: 12px; } .p-16 { padding: 16px; } .p-20 { padding: 20px; } .p-24 { padding: 24px; } .w-100 { width: 100%; } .w-auto { width: auto; } .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .divider { border: none; border-top: 1px solid var(--color-grey-border); margin: 16px 0; } /* Loading spinner */ .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(0, 0, 0, 0.15); border-top-color: var(--color-blue-primary); border-radius: 50%; animation: spin 0.7s linear infinite; } .spinner--white { border-color: rgba(255,255,255,0.3); border-top-color: var(--color-white); } .spinner--sm { width: 14px; height: 14px; } .spinner--lg { width: 32px; height: 32px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } /* Empty state */ .empty-state { text-align: center; padding: 48px 24px; } .empty-state-icon { font-size: 48px; color: var(--color-grey-border); margin-bottom: 16px; } .empty-state-title { font-size: var(--text-xl); font-weight: 600; color: var(--color-heading-text); margin-bottom: 8px; } .empty-state-desc { font-size: var(--text-md); color: var(--color-grey-text); max-width: 400px; margin: 0 auto 20px; line-height: var(--line-height-relaxed); } /* Activity feed */ .activity-feed { display: flex; flex-direction: column; gap: 0; } .activity-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--color-grey-border); align-items: flex-start; } .activity-item:last-child { border-bottom: none; } .activity-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; } .activity-icon--blue { background-color: var(--color-blue-light); color: var(--color-blue-primary); } .activity-icon--green { background-color: var(--color-green-light); color: var(--color-green); } .activity-icon--amber { background-color: var(--color-amber-light); color: var(--color-amber-dark); } .activity-icon--red { background-color: var(--color-red-light); color: var(--color-red); } .activity-icon--teal { background-color: var(--color-teal-light); color: var(--color-teal); } .activity-icon--grey { background-color: var(--color-grey-light); color: var(--color-grey-text); } .activity-content { flex: 1; min-width: 0; } .activity-text { font-size: var(--text-sm); color: var(--color-body-text); line-height: 1.45; } .activity-text a { font-weight: 500; } .activity-time { font-size: var(--text-xs); color: var(--color-grey-text); margin-top: 2px; white-space: nowrap; } /* CSAT star rating */ .csat-stars { display: flex; gap: 4px; align-items: center; } .csat-star { font-size: 20px; cursor: pointer; color: var(--color-grey-border); transition: color var(--transition-fast); } .csat-star.active, .csat-star:hover { color: var(--color-amber); } /* Vote button */ .vote-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--color-grey-border); border-radius: var(--radius-sm); background-color: var(--color-white); color: var(--color-grey-text); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: all var(--transition-fast); } .vote-btn:hover { border-color: var(--color-blue-primary); color: var(--color-blue-primary); text-decoration: none; } .vote-btn.voted { background-color: var(--color-blue-light); border-color: var(--color-blue-primary); color: var(--color-blue-primary); } /* Dropdown menu */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: calc(100% + 4px); right: 0; background-color: var(--color-white); border: 1px solid var(--color-grey-border); border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown); min-width: 180px; z-index: var(--z-dropdown); overflow: hidden; animation: dropdownFadeIn 0.15s ease; } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .dropdown-item { display: flex; align-items: center; gap: 9px; padding: 9px 16px; font-size: var(--text-base); color: var(--color-body-text); text-decoration: none; cursor: pointer; transition: background-color var(--transition-fast); white-space: nowrap; border: none; background: none; width: 100%; text-align: left; } .dropdown-item:hover { background-color: var(--color-grey-light); text-decoration: none; } .dropdown-item i { width: 14px; text-align: center; color: var(--color-grey-text); } .dropdown-item--danger { color: var(--color-red); } .dropdown-item--danger:hover { background-color: var(--color-red-light); } .dropdown-divider { border: none; border-top: 1px solid var(--color-grey-border); margin: 4px 0; } /* Page tabs */ .page-tabs { display: flex; border-bottom: 2px solid var(--color-grey-border); margin-bottom: 20px; gap: 0; overflow-x: auto; } .page-tab { display: flex; align-items: center; gap: 7px; padding: 10px 18px; font-size: var(--text-base); font-weight: 500; color: var(--color-grey-text); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast); } .page-tab:hover { color: var(--color-body-text); text-decoration: none; } .page-tab.active { color: var(--color-blue-primary); border-bottom-color: var(--color-blue-primary); font-weight: 600; } .page-tab .tab-count { background-color: var(--color-grey-light); color: var(--color-grey-text); font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-full); padding: 1px 6px; } .page-tab.active .tab-count { background-color: var(--color-blue-light); color: var(--color-blue-primary); } /* Ticket sidebar fields */ .ticket-sidebar-field { padding: 10px 0; border-bottom: 1px solid var(--color-grey-border); } .ticket-sidebar-field:last-child { border-bottom: none; } .ticket-sidebar-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-grey-text); margin-bottom: 4px; } .ticket-sidebar-value { font-size: var(--text-sm); font-weight: 500; color: var(--color-body-text); } /* Announcement banner */ .announcement-banner { background-color: var(--color-blue-light); border: 1px solid var(--color-blue-primary); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 16px; display: flex; gap: 12px; align-items: flex-start; } .announcement-banner--warning { background-color: var(--color-amber-light); border-color: var(--color-amber); } .announcement-banner-icon { font-size: 16px; color: var(--color-blue-primary); flex-shrink: 0; margin-top: 1px; } .announcement-banner--warning .announcement-banner-icon { color: var(--color-amber-dark); } /* ============================================================ 23. RESPONSIVE BREAKPOINTS ============================================================ */ /* ---- Tablet: 768px – 1023px ---- */ @media (max-width: 1023px) { :root { --content-padding: 16px; } .page-layout-two-col { grid-template-columns: 1fr; } .page-layout-sidebar { order: -1; } .stat-cards-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .form-row-3, .form-row-4 { grid-template-columns: 1fr 1fr; } .kanban-column { width: 250px; } } /* ---- Mobile: < 768px ---- */ @media (max-width: 767px) { :root { --content-padding: 12px; --topbar-height: 52px; } /* Sidebar collapses off-screen */ .sidebar { transform: translateX(-100%); transition: transform var(--transition-base); box-shadow: none; } .sidebar.sidebar--open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25); } .main-content { margin-left: 0; } .topbar { left: 0; } .sidebar-toggle { display: flex; align-items: center; justify-content: center; } .page-heading { flex-direction: column; align-items: flex-start; } .page-heading-actions { width: 100%; } .card-header { flex-wrap: wrap; } .table-wrapper { margin-left: calc(-1 * var(--content-padding)); margin-right: calc(-1 * var(--content-padding)); border-radius: 0; } .data-table { min-width: 600px; } .form-row-2, .form-row-3, .form-row-4 { grid-template-columns: 1fr; } .filter-bar { flex-direction: column; } .filter-bar-group { width: 100%; min-width: unset; } .filter-bar-actions { width: 100%; justify-content: flex-end; } .stat-cards-grid { grid-template-columns: 1fr 1fr; } .auth-card { padding: 28px 24px; } /* Modal slides up from bottom on mobile */ .modal-overlay { align-items: flex-end; padding: 0; } .modal-container { max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 90vh; } .reply-item { flex-direction: column; gap: 8px; } .reply-header { flex-wrap: wrap; } .reply-timestamp { margin-left: 0; width: 100%; } .page-layout-two-col { grid-template-columns: 1fr; } .pagination { flex-direction: column; align-items: center; gap: 10px; } /* Kanban stacks vertically on mobile */ .kanban-board { flex-direction: column; } .kanban-column { width: 100%; max-height: none; } /* Toast at bottom on mobile */ .toast-container { top: auto; bottom: 12px; right: 12px; left: 12px; max-width: none; width: auto; } } /* ---- Small mobile: < 480px ---- */ @media (max-width: 479px) { .stat-cards-grid { grid-template-columns: 1fr; } .page-tab { padding: 8px 12px; font-size: var(--text-sm); } .btn-xl { padding: 12px 20px; font-size: var(--text-base); } } /* ---- Print ---- */ @media print { .sidebar, .topbar, .toast-container, .reply-composer, .filter-bar, .page-heading-actions, .modal-overlay { display: none !important; } .main-content { margin-left: 0; padding-top: 0; } .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } body { background: white; color: black; } } /* ============================================================ 24. COMPANY MODULE — sd- component styles ============================================================ */ /* ---- Page header row ---- */ .sd-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .sd-page-header__left { display: flex; flex-direction: column; gap: 4px; } .sd-page-header__title { font-size: 1.375rem; font-weight: 700; color: var(--color-navy); margin: 0; display: flex; align-items: center; gap: 10px; } .sd-page-header__icon { color: var(--color-blue-primary); font-size: 1.1rem; } .sd-page-header__subtitle { font-size: .8125rem; color: var(--color-grey-text); margin: 0; } .sd-page-header__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } /* ---- Back link ---- */ .sd-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--color-blue-primary); text-decoration: none; margin-bottom: 2px; } .sd-back-link:hover { text-decoration: underline; } /* ---- Filter bar ---- */ .sd-filter-bar { margin-bottom: 16px; padding: 16px 20px; } .sd-filter-bar__inner { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .sd-filter-bar__field { display: flex; flex-direction: column; gap: 4px; min-width: 160px; } .sd-filter-bar__field--search { min-width: 220px; flex: 1; } .sd-filter-bar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sd-filter-bar__count { font-size: .8125rem; color: var(--color-grey-text); white-space: nowrap; margin-left: 4px; } .sd-input-icon-wrap { position: relative; } .sd-input-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-grey-text); font-size: .8125rem; pointer-events: none; } /* ---- Company logo thumb ---- */ .sd-table__company-cell { display: flex; align-items: center; gap: 10px; } .sd-company-logo-thumb { width: 32px; height: 32px; object-fit: contain; border-radius: 4px; border: 1px solid var(--color-grey-border); background: #fff; flex-shrink: 0; } .sd-company-logo-thumb--placeholder { display: inline-flex; align-items: center; justify-content: center; color: var(--color-grey-text); font-size: .875rem; } /* ---- Domain tags ---- */ .sd-tag-list { display: flex; flex-wrap: wrap; gap: 4px; } .sd-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 500; background: var(--color-blue-lighter, #EBF5FB); color: var(--color-blue-primary); border: 1px solid var(--color-blue-light, #D6EAF8); white-space: nowrap; } .sd-tag--removable { padding-right: 4px; } .sd-tag__remove { background: none; border: none; cursor: pointer; padding: 0 2px; color: var(--color-blue-primary); display: inline-flex; align-items: center; font-size: .6875rem; opacity: .7; border-radius: 2px; transition: opacity .15s; } .sd-tag__remove:hover { opacity: 1; color: var(--color-red); } /* ---- Tag input ---- */ .sd-tag-input-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; border: 1px solid var(--color-grey-border); border-radius: 6px; background: #fff; min-height: 42px; cursor: text; transition: border-color .15s, box-shadow .15s; } .sd-tag-input-wrap:focus-within { border-color: var(--color-blue-primary); box-shadow: 0 0 0 3px rgba(41,128,212,.2); } .sd-tag-input__field { border: none; outline: none; background: transparent; font-size: .875rem; color: var(--color-body-text); flex: 1; min-width: 120px; padding: 2px 0; } /* ---- Table helpers ---- */ .sd-table__id { color: var(--color-grey-text); font-size: .8125rem; } .sd-table__link { color: var(--color-blue-primary); text-decoration: none; font-weight: 500; } .sd-table__link:hover { text-decoration: underline; } .sd-table__muted { color: var(--color-grey-text); } .sd-table__agent { display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; } .sd-table__agent-icon { color: var(--color-grey-text); font-size: .75rem; } .sd-table__count { font-weight: 600; color: var(--color-navy); } .sd-table__actions { display: flex; gap: 4px; justify-content: flex-end; } /* ---- Icon-only action buttons ---- */ .sd-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 5px; border: none; cursor: pointer; font-size: .8125rem; text-decoration: none; transition: filter .15s; } .sd-btn-icon--blue { background: var(--color-blue-primary); color: #fff; } .sd-btn-icon--red { background: var(--color-red); color: #fff; } .sd-btn-icon--amber { background: #FFC107; color: #212529; } .sd-btn-icon--green { background: var(--color-green); color: #fff; } .sd-btn-icon:hover { filter: brightness(90%); } .sd-inline-form { display: inline-flex; } /* ---- Empty state ---- */ .sd-empty-state { padding: 48px 24px; text-align: center; color: var(--color-grey-text); } .sd-empty-state--sm { padding: 32px 24px; } .sd-empty-state__icon { font-size: 2.5rem; opacity: .3; margin-bottom: 12px; display: block; } .sd-empty-state__title { font-size: 1rem; font-weight: 600; color: var(--color-navy); margin: 0 0 6px; } .sd-empty-state__text { font-size: .875rem; margin: 0; } .sd-empty-state__text a { color: var(--color-blue-primary); } .sd-pagination-wrap { padding: 16px 20px; border-top: 1px solid var(--color-grey-border); } /* ---- Two-column layout ---- */ .sd-layout-with-sidebar { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; } .sd-layout-with-sidebar__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .sd-layout-with-sidebar__sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; } /* ---- Company header card ---- */ .sd-company-header-card__inner { display: flex; gap: 20px; align-items: flex-start; padding: 20px; } .sd-company-header-card__logo { width: 80px; height: 80px; object-fit: contain; border-radius: 8px; border: 1px solid var(--color-grey-border); background: #fff; padding: 4px; } .sd-company-header-card__logo-placeholder { width: 80px; height: 80px; border-radius: 8px; border: 1px solid var(--color-grey-border); background: var(--color-grey-bg); display: flex; align-items: center; justify-content: center; color: var(--color-grey-text); font-size: 2rem; } .sd-company-header-card__info { flex: 1; min-width: 0; } .sd-company-header-card__name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .sd-company-header-card__name { font-size: 1.375rem; font-weight: 700; color: var(--color-navy); margin: 0; } /* ---- Definition list ---- */ .sd-definition-list { display: grid; gap: 12px; } .sd-definition-list--inline { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); } .sd-definition-list--stacked { grid-template-columns: 1fr; } .sd-definition-list__item { display: flex; flex-direction: column; gap: 3px; } .sd-definition-list dt { font-size: .75rem; font-weight: 600; color: var(--color-grey-text); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 5px; } .sd-definition-list dd { font-size: .875rem; color: var(--color-body-text); margin: 0; } /* ---- Tabs ---- */ .sd-tabs { display: flex; border-bottom: 1px solid var(--color-grey-border); padding: 0 4px; gap: 2px; overflow-x: auto; } .sd-tab { padding: 12px 18px; font-size: .8125rem; font-weight: 500; color: var(--color-grey-text); background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; transition: color .15s, border-color .15s; } .sd-tab:hover { color: var(--color-navy); } .sd-tab--active { color: var(--color-blue-primary); border-bottom-color: var(--color-blue-primary); } .sd-tab-panel { padding: 20px 24px; } .sd-tab-panel__footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--color-grey-border); } /* ---- Quick actions sidebar ---- */ .sd-quick-actions { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; } .sd-btn--full { width: 100%; justify-content: center; } .sd-stats-list { display: grid; gap: 0; } /* Danger zone card body padding */ .sd-card--danger-zone form { padding: 0 20px 16px; } /* Sidebar card actions-between-forms spacing */ .sd-card--danger-zone form + form { margin-top: 0; } .sd-card--danger-zone form.sd-danger-zone__form--spaced { margin-bottom: 10px; } /* Table column width helpers */ .sd-table__th--id, .sd-table__td--id { width: 80px; } .sd-table__th--right, .sd-table__td--right { text-align: right; } .sd-stats-list__item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-grey-border); } .sd-stats-list__item:last-child { border-bottom: none; } .sd-stats-list dt { font-size: .8125rem; color: var(--color-grey-text); } .sd-stats-list dd { font-size: 1rem; font-weight: 700; color: var(--color-navy); margin: 0; } /* ---- Danger zone ---- */ .sd-card--danger-zone { border-color: var(--color-red); } .sd-card__heading--danger { color: var(--color-red) !important; } .sd-danger-zone__text { font-size: .8125rem; color: var(--color-grey-text); margin-bottom: 12px; padding: 12px 20px 0; } .sd-card__heading { display: flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 600; color: var(--color-navy); padding: 14px 20px; margin-bottom: 0; border-bottom: 1px solid var(--color-grey-border); } .sd-card__heading i { color: var(--color-navy-mid); font-size: .9rem; } /* ---- Misc helpers ---- */ .sd-note-box { background: var(--color-blue-lighter, #EBF5FB); border-left: 3px solid var(--color-blue-primary); padding: 10px 14px; border-radius: 4px; font-size: .875rem; color: var(--color-body-text); white-space: pre-wrap; } .sd-code { font-family: 'Fira Code', monospace; font-size: .8125rem; background: var(--color-grey-bg); padding: 2px 6px; border-radius: 4px; color: var(--color-navy-mid); } .sd-muted { color: var(--color-grey-text); } .sd-link { color: var(--color-blue-primary); text-decoration: none; } .sd-link:hover { text-decoration: underline; } /* ---- Validation alert ---- */ .sd-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 6px; margin-bottom: 20px; font-size: .875rem; } .sd-alert--error { background: #FFF5F5; border: 1px solid var(--color-red); color: var(--color-red); } .sd-alert__icon { flex-shrink: 0; margin-top: 1px; } .sd-alert__list { margin: 6px 0 0; padding-left: 16px; color: var(--color-body-text); } /* ---- Form layout ---- */ .sd-form-layout { display: flex; flex-direction: column; gap: 20px; } .sd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sd-form-row--toggles { grid-template-columns: 1fr; gap: 16px; } .sd-form-group { display: flex; flex-direction: column; gap: 6px; } .sd-form-group--full { grid-column: 1 / -1; } .sd-form-actions { display: flex; gap: 10px; align-items: center; padding: 20px 24px; border-top: 1px solid var(--color-grey-border); margin-top: 8px; } .sd-label { display: block; font-weight: 600; font-size: .8125rem; color: var(--color-body-text); margin-bottom: 2px; } .sd-label--required::after { content: ' *'; color: var(--color-red); } .sd-help-text { font-size: .75rem; color: var(--color-grey-text); margin: 0 0 6px; } .sd-field-error { font-size: .75rem; color: var(--color-red); display: flex; align-items: center; gap: 4px; margin: 0; } .sd-input, .sd-select, .sd-textarea { width: 100%; border: 1px solid var(--color-grey-border); border-radius: 6px; padding: 8px 12px; font-size: .875rem; background: #fff; color: var(--color-body-text); font-family: inherit; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; } .sd-input--icon-left { padding-left: 32px; } .sd-input:focus, .sd-select:focus, .sd-textarea:focus { outline: none; border-color: var(--color-blue-primary); box-shadow: 0 0 0 3px rgba(41,128,212,.2); } .sd-input--error, .sd-input--error:focus { border-color: var(--color-red); background: #FFF5F5; } .sd-textarea { resize: vertical; min-height: 90px; } /* ---- File upload ---- */ .sd-file-upload-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .sd-file-upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); } .sd-file-upload-label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px dashed var(--color-grey-border); border-radius: 6px; cursor: pointer; font-size: .8125rem; color: var(--color-blue-primary); background: var(--color-blue-lighter, #EBF5FB); transition: background .15s, border-color .15s; } .sd-file-upload-label:hover { background: var(--color-blue-light, #D6EAF8); border-color: var(--color-blue-primary); } .sd-logo-preview { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; border: 1px solid var(--color-grey-border); padding: 4px; background: #fff; } /* ---- Toggle switch ---- */ .sd-toggle-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--color-grey-border); background: #fff; transition: background .15s; } .sd-toggle-label:hover { background: var(--color-blue-lighter, #EBF5FB); } .sd-toggle-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .sd-toggle-track { width: 40px; height: 22px; border-radius: 11px; background: #ADB5BD; flex-shrink: 0; margin-top: 1px; position: relative; transition: background .2s; } .sd-toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .sd-toggle-input:checked + .sd-toggle-track { background: var(--color-green); } .sd-toggle-input:checked + .sd-toggle-track::after { transform: translateX(18px); } .sd-toggle-input:focus + .sd-toggle-track { box-shadow: 0 0 0 3px rgba(41,128,212,.3); } .sd-toggle-text { display: flex; flex-direction: column; gap: 2px; } .sd-toggle-text__title { font-size: .875rem; font-weight: 600; color: var(--color-body-text); } .sd-toggle-text__desc { font-size: .75rem; color: var(--color-grey-text); line-height: 1.4; } /* ---- sd-btn variants ---- */ .sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 16px; border-radius: 6px; font-size: .8125rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: filter .15s, box-shadow .15s; font-family: inherit; } .sd-btn:hover { filter: brightness(92%); color: inherit; } .sd-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(41,128,212,.3); } .sd-btn--primary { background: var(--color-blue-primary); color: #fff; } .sd-btn--secondary { background: #6C757D; color: #fff; } .sd-btn--success { background: var(--color-green); color: #fff; } .sd-btn--danger { background: var(--color-red); color: #fff; } .sd-btn--warning { background: #FFC107; color: #212529; } .sd-btn--dark { background: var(--color-navy-mid); color: #fff; } .sd-btn--ghost { background: transparent; color: var(--color-blue-primary); border-color: var(--color-blue-primary); } .sd-btn--sm { padding: 5px 10px; font-size: .75rem; } .sd-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); } .sd-btn--outline-light:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.9); color: #fff; } /* Logout button — used on white topbar, always visible */ .sd-btn--logout { background: var(--color-grey-bg); color: var(--color-navy); border-color: var(--color-grey-border); } .sd-btn--logout:hover { background: #e2e6ea; border-color: #b0b6bf; color: var(--color-navy); filter: none; } /* ---- sd-badge variants ---- */ .sd-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 4px; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; line-height: 1.4; } .sd-badge--success { background: var(--color-green); color: #fff; } .sd-badge--inactive { background: #ADB5BD; color: #fff; } .sd-badge--dark { background: var(--color-navy-mid); color: #fff; } .sd-badge--info { background: var(--color-blue-primary); color: #fff; } .sd-badge--danger { background: var(--color-red); color: #fff; } .sd-badge--teal { background: #20C997; color: #fff; } .sd-badge--warning { background: #FFC107; color: #212529; } .sd-badge--super { background: var(--color-navy); color: #fff; } .sd-badge--admin { background: var(--color-navy-mid); color: #fff; } .sd-badge--agent { background: var(--color-blue-primary); color: #fff; } .sd-badge--customer { background: var(--color-green); color: #fff; } /* Sidebar header role badge — full width row below logo+brand */ .sd-sidebar__header > .sd-badge { display: block; width: 100%; text-align: center; border-radius: 4px; padding: 3px 0; font-size: 0.6875rem; } /* ── Role pill — matches customer portal style, role-specific colours ── */ .sd-role-pill { display: block; width: 100%; text-align: center; border-radius: 6px; padding: 5px 0; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4; transition: opacity 0.15s; } /* Super Admin — deep purple/violet to stand out as highest privilege */ .sd-role-pill--super-admin { background: #6D28D9; color: #fff; } /* Agent Admin — rich teal/dark-cyan, distinct from both super and agent */ .sd-role-pill--agent-admin { background: #0D7377; color: #fff; } /* Agent — steel blue, clearly lower than admin tiers */ .sd-role-pill--agent { background: #2980D4; color: #fff; } /* Customer — green (matches existing portal pill in the screenshot) */ .sd-role-pill--customer { background: #16A34A; color: #fff; } /* ---- Card no-pad / sd-table ---- */ .sd-card--no-pad { padding: 0; overflow: hidden; } .sd-table-wrap { overflow-x: auto; } .sd-table { width: 100%; border-collapse: collapse; font-size: .8125rem; } .sd-table thead tr { background: var(--color-navy); color: #fff; } .sd-table thead th { padding: 10px 13px; text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } .sd-table tbody tr:nth-child(even) { background: var(--color-grey-bg); } .sd-table tbody tr:hover { background: var(--color-blue-lighter, #EBF5FB); } .sd-table tbody td { padding: 10px 13px; border-bottom: 1px solid var(--color-grey-border); vertical-align: middle; } /* ---- Responsive ---- */ @media (max-width: 1100px) { .sd-layout-with-sidebar { grid-template-columns: 1fr; } .sd-layout-with-sidebar__sidebar { position: static; } } @media (max-width: 768px) { .sd-form-row { grid-template-columns: 1fr; } .sd-filter-bar__inner { flex-direction: column; } .sd-filter-bar__field, .sd-filter-bar__field--search { min-width: 100%; width: 100%; } .sd-page-header { flex-direction: column; } .sd-company-header-card__inner { flex-direction: column; } .sd-definition-list--inline { grid-template-columns: 1fr; } } /* ── Ticket layout (two-column) ───────────────────────────────────────── */ .ticket-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; } .ticket-layout--portal { grid-template-columns: 1fr 240px; } @media (max-width: 900px) { .ticket-layout, .ticket-layout--portal { grid-template-columns: 1fr; } .ticket-sidebar { order: -1; } } /* ── Thread container ─────────────────────────────────────────────────── */ .ticket-thread { padding: 20px; display: flex; flex-direction: column; gap: 20px; } .thread-empty { color: #888; font-style: italic; text-align: center; padding: 32px 0; } /* ── Thread item (shared) ─────────────────────────────────────────────── */ .thread-item { display: flex; gap: 14px; align-items: flex-start; } .thread-avatar { flex-shrink: 0; } .avatar-initials { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #2980D4; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; } .avatar--agent { background: #1A2E4A; } .avatar--customer { background: #2980D4; } .thread-content { flex: 1; min-width: 0; } .thread-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; font-size: 13px; } .thread-time { color: #999; font-size: 12px; } .thread-body { background: #fff; border: 1px solid #e5e9f0; border-radius: 8px; padding: 14px 16px; font-size: 14px; line-height: 1.65; color: #333; word-break: break-word; } /* Public reply */ .thread-item--public .thread-body { border-color: #d4e4f5; background: #f8fbff; } /* Agent reply (portal) */ .thread-item--agent .thread-body { background: #f4f6f8; border-color: #dde3ea; } /* Internal note */ .thread-item--internal .thread-body { background: #fffbea; border-color: #f0d070; border-left: 4px solid #f0c040; } /* ── Attachment list (inside thread item) ─────────────────────────────── */ .attachment-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .attachment-item { display: flex; align-items: center; gap: 10px; background: #f4f6f8; border: 1px solid #e5e9f0; border-radius: 6px; padding: 8px 12px; font-size: 13px; } .attachment-icon { font-size: 18px; color: #2980D4; flex-shrink: 0; } .attachment-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .attachment-name { font-weight: 500; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .attachment-size { color: #999; font-size: 11px; } .attachment-actions { display: flex; gap: 6px; flex-shrink: 0; } /* ── File drop zone ───────────────────────────────────────────────────── */ .file-drop-zone { border: 2px dashed #c5d0dc; border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; transition: background 0.15s, border-color 0.15s; position: relative; } .file-drop-zone:hover, .file-drop-zone--active { background: #eef4fb; border-color: #2980D4; } .file-input-hidden { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .file-drop-label { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #667; font-size: 14px; pointer-events: none; } .file-drop-label i { font-size: 28px; color: #2980D4; } /* ── File preview list ────────────────────────────────────────────────── */ .file-preview-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .file-preview-item { display: flex; align-items: center; gap: 10px; background: #f4f6f8; border: 1px solid #e5e9f0; border-radius: 6px; padding: 8px 12px; font-size: 13px; } .file-preview-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; } .file-preview-size { color: #999; font-size: 12px; white-space: nowrap; } /* ── Toggle (internal note switch) ───────────────────────────────────── */ .toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 500; } .toggle-checkbox { width: 16px; height: 16px; accent-color: #f0c040; cursor: pointer; } .toggle-text { color: #555; } /* Tint form background when internal note is selected */ .reply-form--internal textarea { background: #fffbea !important; border-color: #f0d070 !important; } /* ── Sidebar ──────────────────────────────────────────────────────────── */ .sidebar-card .card-header { font-size: 14px; } .sidebar-body { padding: 12px 16px; } .sidebar-field { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-bottom: 1px solid #f0f2f5; } .sidebar-field:last-child { border-bottom: none; } .sidebar-label { font-size: 11px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.5px; } .sidebar-value { font-size: 14px; color: #333; } .sidebar-control .form-select--sm { padding: 5px 8px; font-size: 13px; } .sidebar-divider { border: none; border-top: 1px solid #eef0f3; margin: 4px 0; } .sidebar-inline-form { margin: 0; } /* ── SLA indicators ───────────────────────────────────────────────────── */ .sla-indicator { font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; } .sla-indicator--ok { color: #28A745; } .sla-indicator--met { color: #28A745; } .sla-indicator--breached { color: #DC3545; } .sla-indicator--warning { color: #e67e22; } /* ── Tab nav ──────────────────────────────────────────────────────────── */ .tab-nav { display: flex; border-bottom: 2px solid #e5e9f0; padding: 0 20px; } .tab-btn { background: none; border: none; padding: 12px 16px; font-size: 14px; font-weight: 500; color: #667; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; } .tab-btn:hover { color: #2980D4; } .tab-btn--active { color: #2980D4; border-bottom-color: #2980D4; } /* ── Audit / linked issue rows ────────────────────────────────────────── */ .audit-row { display: flex; gap: 12px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid #f4f6f8; color: #555; } .audit-time { color: #999; white-space: nowrap; } .audit-user { font-weight: 500; } .audit-action { flex: 1; } .linked-issue-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 8px 0; border-bottom: 1px solid #f4f6f8; } /* ── Page header row ──────────────────────────────────────────────────── */ .page-header-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .badge--lg { font-size: 13px; padding: 5px 12px; } /* ── Info box (neutral/closed ticket notice) ──────────────────────────── */ .info-box { border-radius: 8px; padding: 16px 20px; font-size: 14px; display: flex; align-items: center; gap: 10px; } .info-box--neutral { background: #f4f6f8; border-left: 4px solid #aab; color: #555; } /* ============================================================ 25. SD COMPONENT SYSTEM (config pages, layout, modals) ============================================================ */ /* ── 25.1 Layout shell ───────────────────────────────────────────────── */ .sd-layout { display: flex; min-height: 100vh; background: #F4F6F8; } /* ── 25.2 Sidebar ────────────────────────────────────────────────────── */ .sd-sidebar { position: fixed; top: 0; left: 0; width: 220px; height: 100vh; background: #1A2E4A; display: flex; flex-direction: column; z-index: 200; overflow-y: auto; overflow-x: hidden; } .sd-sidebar__header { padding: 16px 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; } .sd-sidebar__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .sd-sidebar__logo-img { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; flex-shrink: 0; } .sd-sidebar__logo-fallback { width: 36px; height: 36px; border-radius: 8px; background: #2980D4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sd-sidebar__logo-icon { color: #fff; font-size: 18px; } .sd-sidebar__brand { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .sd-sidebar__company { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .sd-sidebar__portal-name { font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3; } .sd-sidebar__nav { flex: 1; padding: 12px 0; overflow-y: auto; } .sd-sidebar__footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .sd-sidebar__user { display: flex; align-items: center; gap: 8px; text-decoration: none; } .sd-sidebar__user-avatar { width: 28px; height: 28px; border-radius: 50%; background: #2980D4; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; } .sd-sidebar__user-name { font-size: 12px; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } @media (max-width: 768px) { .sd-sidebar { transform: translateX(-100%); transition: transform 0.25s ease; } .sd-sidebar--open { transform: translateX(0); } } /* ── 25.3 Main content area ──────────────────────────────────────────── */ .sd-main { margin-left: 220px; padding-top: 56px; min-height: 100vh; flex: 1; min-width: 0; width: calc(100% - 220px); max-width: none; display: flex; flex-direction: column; /* enables footer to stick to bottom via flex layout */ } @media (max-width: 768px) { .sd-main { margin-left: 0; width: 100%; } } /* ── 25.4 Top bar ────────────────────────────────────────────────────── */ .sd-topbar { position: fixed; top: 0; left: 220px; right: 0; height: 56px; background: #fff; border-bottom: 1px solid #e1e4e8; display: flex; align-items: center; padding: 0 20px; gap: 12px; z-index: 100; } @media (max-width: 768px) { .sd-topbar { left: 0; } } .sd-topbar__menu-toggle { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px; color: #555; display: none; line-height: 1; } @media (max-width: 768px) { .sd-topbar__menu-toggle { display: flex; align-items: center; } } .sd-topbar__title { font-size: 16px; font-weight: 600; color: #1A2E4A; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sd-topbar__controls { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; } .sd-topbar__user-name { font-size: 13px; color: #555; white-space: nowrap; } .sd-topbar__logout-form { display: inline; margin: 0; padding: 0; } /* ── 25.5 Content wrapper ────────────────────────────────────────────── */ .sd-content { padding: 24px; width: 100%; max-width: none; box-sizing: border-box; flex: 1; /* grows to fill available space, pushing footer to bottom */ } /* ── 25.6 Sidebar navigation ─────────────────────────────────────────── */ .sd-nav-group { margin-bottom: 4px; } .sd-nav-group__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.35); padding: 12px 16px 4px; display: block; } .sd-nav-group__list { list-style: none; margin: 0; padding: 0; } .sd-nav-link { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.65); text-decoration: none; border-radius: 0; transition: background 0.15s, color 0.15s; position: relative; } .sd-nav-link:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.9); } .sd-nav-link--active { background: rgba(41,128,212,0.2); color: #fff; font-weight: 600; } .sd-nav-link--active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #2980D4; border-radius: 0 2px 2px 0; } .sd-nav-link__icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; opacity: 0.8; } .sd-nav-link--active .sd-nav-link__icon { opacity: 1; } /* ── 25.7 Config sub-navigation ──────────────────────────────────────── */ .sd-config-nav { background: #fff; border: 1px solid #e1e4e8; border-radius: 8px; margin-bottom: 24px; overflow: hidden; } .sd-config-nav__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 0; } .sd-config-nav__item { flex-shrink: 0; } .sd-config-nav__link { display: flex; align-items: center; gap: 6px; padding: 10px 16px; font-size: 13px; font-weight: 500; color: #555; text-decoration: none; border-right: 1px solid #e1e4e8; border-bottom: 3px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .sd-config-nav__link:hover { background: #f4f6f8; color: #1A2E4A; } .sd-config-nav__link--active { color: #2980D4; border-bottom-color: #2980D4; font-weight: 600; background: #f0f6ff; } .sd-config-nav__icon { font-size: 13px; opacity: 0.75; } .sd-config-nav__link--active .sd-config-nav__icon { opacity: 1; } /* ── 25.8 Card component ─────────────────────────────────────────────── */ .sd-card { background: #fff; border: 1px solid #e1e4e8; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 24px; } .sd-card__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #e1e4e8; gap: 10px; flex-wrap: wrap; } .sd-card__title { font-size: 15px; font-weight: 600; color: #1A2E4A; margin: 0; } .sd-card__subtitle { font-size: 12px; color: #888; margin: 2px 0 0; } .sd-card__body { padding: 24px; } .sd-card__body--flush { padding: 0; } .sd-card__footer { padding: 12px 20px; border-top: 1px solid #e1e4e8; background: #f8f9fa; border-radius: 0 0 8px 8px; } .sd-card__footer--right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; } /* ── 25.9 Config table ───────────────────────────────────────────────── */ .sd-table--config { width: 100%; border-collapse: collapse; font-size: 13px; } .sd-table__head { background: #1A2E4A; } .sd-table__th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.8); white-space: nowrap; border: none; } .sd-table__th--drag { width: 36px; padding-left: 12px; padding-right: 4px; } .sd-table__th--center { text-align: center; } .sd-table__th--actions { text-align: right; width: 120px; } .sd-table__body tr { border-bottom: 1px solid #eef0f3; transition: background 0.1s; } .sd-table__body tr:hover { background: #f8f9fa; } .sd-table__body tr:last-child { border-bottom: none; } .sd-table__row--ghost { opacity: 0.45; outline: 2px dashed #2980D4; outline-offset: -2px; background: #f0f6ff !important; } .sd-table__td { padding: 11px 14px; vertical-align: middle; color: #333; border: none; } .sd-table__td--drag { padding-left: 12px; padding-right: 4px; width: 36px; } .sd-table__td--bold { font-weight: 600; color: #1A2E4A; } .sd-table__td--muted { color: #888; } .sd-table__td--center { text-align: center; } .sd-table__td--actions { text-align: right; white-space: nowrap; padding-right: 14px; } .sd-table__td--nowrap { white-space: nowrap; } .sd-table__td--empty { text-align: center; padding: 40px 20px; color: #999; font-style: italic; font-size: 13px; } .sd-table__td--truncate { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── 25.10 Drag handle ───────────────────────────────────────────────── */ .sd-drag-handle { cursor: grab; color: #bbb; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; padding: 2px; border-radius: 3px; transition: color 0.1s, background 0.1s; user-select: none; } .sd-drag-handle:hover { color: #888; background: #f0f0f0; } .sd-drag-handle:active { cursor: grabbing; } /* ── 25.11 Colour picker components ──────────────────────────────────── */ .sd-colour-picker-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sd-colour-picker { width: 38px; height: 38px; border: 2px solid #e1e4e8; border-radius: 6px; cursor: pointer; padding: 2px; background: none; flex-shrink: 0; } .sd-colour-picker::-webkit-color-swatch-wrapper { padding: 0; border-radius: 4px; overflow: hidden; } .sd-colour-picker::-webkit-color-swatch { border: none; border-radius: 4px; } .sd-input--colour-hex { font-family: 'Courier New', Courier, monospace; font-size: 13px; width: 96px; text-transform: uppercase; } .sd-colour-preview { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.1); flex-shrink: 0; display: inline-block; } .sd-colour-cell { display: flex; align-items: center; gap: 8px; } .sd-colour-swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); display: inline-block; flex-shrink: 0; } .sd-colour-code { font-family: 'Courier New', Courier, monospace; font-size: 12px; color: #555; text-transform: uppercase; } /* ── 25.12 Badge additions ───────────────────────────────────────────── */ .sd-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; line-height: 1.6; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .sd-badge--primary { background: #2980D4; color: #fff; } .sd-badge--success { background: #28A745; color: #fff; } .sd-badge--danger { background: #DC3545; color: #fff; } .sd-badge--neutral { background: #6C757D; color: #fff; } .sd-badge--warning { background: #FFC107; color: #212529; text-shadow: none; } .sd-badge--light { background: #e9ecef; color: #495057; text-shadow: none; } /* ── Action outcome pill colours (used in Email Processing Log) ── */ .sd-badge--green { background: #28A745; color: #fff; } .sd-badge--blue { background: #2980D4; color: #fff; } .sd-badge--amber { background: #F0A800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .sd-badge--muted { background: #6C757D; color: #fff; text-shadow: none; } .sd-badge--red { background: #DC3545; color: #fff; } /* ── Total count badge (card header, e.g. Email Processing Log) ── */ .sd-badge--navy { background: #1A2E4A; color: #fff; font-size: 12px; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.02em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.2); text-shadow: none; } /* ── 25.13 Count badges ──────────────────────────────────────────────── */ .sd-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 2px 7px; border-radius: 12px; font-size: 11px; font-weight: 700; line-height: 1.5; } .sd-count--linked { background: #e8f1fb; color: #1a5fa8; } .sd-count--zero { background: #f0f1f3; color: #aaa; font-weight: 500; } /* ── 25.14 Action group ──────────────────────────────────────────────── */ .sd-action-group { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } /* ── 25.15 Modal ─────────────────────────────────────────────────────── */ .sd-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 20, 40, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px 24px; z-index: 400; overflow-y: auto; } .sd-modal { background: #fff; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.25); width: 100%; max-width: 560px; display: flex; flex-direction: column; animation: sd-modal-in 0.2s ease; flex-shrink: 0; } @keyframes sd-modal-in { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .sd-modal__header { background: #1A2E4A; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 10px 10px 0 0; flex-shrink: 0; } .sd-modal__title { font-size: 15px; font-weight: 600; color: #fff; margin: 0; } .sd-modal__close { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.7); font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 4px; transition: color 0.15s, background 0.15s; display: flex; align-items: center; } .sd-modal__close:hover { color: #fff; background: rgba(255,255,255,0.12); } .sd-modal__form { display: flex; flex-direction: column; flex: 1; } .sd-modal__body { padding: 24px; overflow-y: auto; flex: 1; } .sd-modal__footer { padding: 14px 20px; border-top: 1px solid #e1e4e8; background: #f8f9fa; border-radius: 0 0 10px 10px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; } /* ── 25.16 Checkbox components ───────────────────────────────────────── */ .sd-checkbox { width: 15px; height: 15px; accent-color: #2980D4; cursor: pointer; flex-shrink: 0; margin: 0; } .sd-checkbox-group { display: flex; flex-direction: column; gap: 10px; } .sd-checkbox-label { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; padding: 8px 10px; border-radius: 6px; transition: background 0.12s; border: 1px solid #e1e4e8; } .sd-checkbox-label:hover { background: #f4f6f8; } .sd-checkbox-label__text { flex: 1; font-size: 13px; line-height: 1.5; color: #333; } .sd-checkbox-label__text strong { display: block; font-weight: 600; color: #1A2E4A; margin-bottom: 1px; } .sd-checkbox-label__text span { color: #777; font-size: 12px; } /* ── 25.17 Form field additions ──────────────────────────────────────── */ .sd-label__hint { font-size: 11px; font-weight: 400; color: #999; margin-left: 6px; } .sd-field-hint { font-size: 11px; color: #888; margin-top: 4px; line-height: 1.4; display: block; } .sd-form-group--half { grid-column: span 1; } /* ── 25.18 Alert additions ───────────────────────────────────────────── */ .sd-alert { padding: 12px 16px; border-radius: 6px; border: 1px solid transparent; font-size: 13px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; } .sd-alert--success { background: #d4edda; border-color: #b8dfc4; color: #155724; } .sd-alert--danger { background: #f8d7da; border-color: #f1aeb5; color: #721c24; } .sd-alert--warning { background: #fff3cd; border-color: #ffc107; color: #856404; } .sd-alert--info { background: #d1ecf1; border-color: #b8d8dc; color: #0c5460; } /* ── 25.19 Save order feedback ───────────────────────────────────────── */ .sd-save-feedback { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #28A745; font-weight: 600; margin-right: 8px; } /* ── 25.20 Page header helpers ───────────────────────────────────────── */ .sd-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; } .sd-page-header__left { display: flex; flex-direction: column; gap: 2px; } .sd-page-header__title { font-size: 20px; font-weight: 700; color: #1A2E4A; margin: 0; } .sd-page-header__subtitle { font-size: 13px; color: #777; margin: 0; } /* ── 25.21 Button additions ──────────────────────────────────────────── */ .sd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; text-decoration: none; white-space: nowrap; line-height: 1.4; } .sd-btn:disabled { opacity: 0.55; cursor: not-allowed; } .sd-btn--primary { background: #2980D4; color: #fff; border-color: #2272bd; } .sd-btn--primary:hover:not(:disabled) { background: #1e6ab8; border-color: #1a5ea6; } .sd-btn--secondary { background: #fff; color: #1A2E4A; border-color: #cfd3da; } .sd-btn--secondary:hover:not(:disabled) { background: #f4f6f8; border-color: #b0b6bf; } .sd-btn--success { background: #28A745; color: #fff; border-color: #20903b; } .sd-btn--success:hover:not(:disabled) { background: #218838; } .sd-btn--danger { background: #DC3545; color: #fff; border-color: #bd2130; } .sd-btn--danger:hover:not(:disabled) { background: #c82333; } .sd-btn--dark { background: #2d4258; color: #fff; border-color: #2d4258; } .sd-btn--dark:hover:not(:disabled) { background: #3d5166; border-color: #3d5166; color: #fff; text-decoration: none; } .sd-btn--ghost { background: transparent; color: #2980D4; border-color: transparent; } .sd-btn--ghost:hover:not(:disabled) { background: #f0f6ff; border-color: #c9dff7; } .sd-btn--outline { background: #fff; color: #1A2E4A; border-color: #c5cdd8; } .sd-btn--outline:hover:not(:disabled) { background: #f4f6f8; border-color: #9aaab8; color: #1A2E4A; text-decoration: none; } .sd-btn--xs { padding: 3px 8px; font-size: 11px; gap: 4px; } .sd-btn--sm { padding: 5px 10px; font-size: 12px; } .sd-btn--icon { padding: 6px 8px; min-width: 32px; justify-content: center; } /* ── 25.22 Utility: screen-reader only ───────────────────────────────── */ .sd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── 25.23 SLA time display ──────────────────────────────────────────── */ .sd-time-display { font-size: 12px; color: #555; white-space: nowrap; } .sd-time-display--none { color: #bbb; font-style: italic; } /* ============================================================ SECTION 26 — REPORTING & ANALYTICS MODULE (v2.0 § 11.4) ============================================================ */ /* ── 26.1 Report index cards grid ───────────────────────────────────── */ .sd-report-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; padding: 1rem 0; } .sd-report-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; background: #fff; border: 1px solid #e0e7ef; border-radius: 10px; text-decoration: none; color: inherit; transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.12s ease; cursor: pointer; } .sd-report-card:hover { box-shadow: 0 4px 16px rgba(26,46,74,0.12); border-color: #2980D4; transform: translateY(-2px); } .sd-report-card__icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; } .sd-report-card__icon--blue { background: #2980D4; } .sd-report-card__icon--green { background: #28A745; } .sd-report-card__icon--purple { background: #7C3AED; } .sd-report-card__icon--teal { background: #0D9488; } .sd-report-card__icon--yellow { background: #D97706; } .sd-report-card__icon--red { background: #DC3545; } .sd-report-card__icon--navy { background: #1A2E4A; } .sd-report-card__body { flex: 1; min-width: 0; } .sd-report-card__title { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; color: #1A2E4A; line-height: 1.3; } .sd-report-card__desc { margin: 0; font-size: 0.825rem; color: #6b7280; line-height: 1.5; } .sd-report-card__arrow { flex-shrink: 0; color: #c0ccd8; font-size: 0.85rem; transition: color 0.18s ease, transform 0.18s ease; } .sd-report-card:hover .sd-report-card__arrow { color: #2980D4; transform: translateX(3px); } /* ── 26.2 Report filter bar ─────────────────────────────────────────── */ .sd-report-filters { margin-bottom: 1.25rem; } /* * The form uses flexbox so fields wrap naturally but never stretch * to fill empty space (which caused the huge gaps with auto-fit grid). * Each field takes only as much width as it needs (or the max-width cap). */ .sd-report-filters__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 20px 24px; box-sizing: border-box; width: 100%; } /* Every field group: stack label above control, fixed width */ .sd-report-filters__form .sd-form-group { margin-bottom: 0; display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; /* do NOT grow or shrink */ width: 175px; /* consistent fixed width for all fields */ } /* Date inputs — slightly narrower than select fields */ .sd-report-filters__form .sd-form-group:has(.sd-input--date) { width: 155px; } /* Outcome / other single-select dropdowns can be a little wider */ .sd-report-filters__form .sd-form-group:has(.sd-select) { width: 190px; } /* Action group: buttons sit inline, vertically aligned with controls */ .sd-form-group--action { display: flex; flex-direction: row !important; /* override column default */ align-items: flex-end !important; gap: 8px; width: auto !important; /* don't use fixed 175px */ flex: 0 0 auto; padding-bottom: 0; margin-top: auto; /* push down to baseline if label above other fields */ } /* Labels inside filter bar */ .sd-report-filters__form .sd-label { font-size: 0.75rem; font-weight: 600; color: var(--color-grey-text); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0; white-space: nowrap; } /* Reset button colour — teal/secondary so it contrasts with Apply (blue) */ .sd-btn--reset { background: #0D9488; color: #fff; border-color: #0b7b71; } .sd-btn--reset:hover:not(:disabled) { background: #0b7b71; border-color: #097066; color: #fff; text-decoration: none; filter: none; } /* On tablet: allow fields to stretch across 2 columns */ @media (max-width: 900px) { .sd-report-filters__form .sd-form-group, .sd-report-filters__form .sd-form-group:has(.sd-input--date), .sd-report-filters__form .sd-form-group:has(.sd-select) { flex: 1 1 calc(50% - 8px); width: auto; } .sd-form-group--action { flex: 1 1 100%; width: 100% !important; justify-content: flex-end; } } /* On mobile: all fields full width, stacked */ @media (max-width: 600px) { .sd-report-filters__form { padding: 16px; gap: 12px; } .sd-report-filters__form .sd-form-group, .sd-report-filters__form .sd-form-group:has(.sd-input--date), .sd-report-filters__form .sd-form-group:has(.sd-select) { flex: 1 1 100%; width: 100%; } .sd-form-group--action { flex: 1 1 100%; width: 100% !important; } .sd-form-group--action .sd-btn { flex: 1; justify-content: center; } } /* ── 26.3 Chart containers ───────────────────────────────────────────── */ .sd-report-chart-card { margin-bottom: 1.25rem; } .sd-report-chart-wrap { position: relative; width: 100%; max-height: 380px; } .sd-report-chart-wrap canvas { max-height: 380px; } .sd-report-chart-wrap--short canvas { max-height: 260px; } /* Two-column chart layout */ .sd-report-charts-row { display: grid; grid-template-columns: 1fr 380px; gap: 1.25rem; margin-bottom: 1.25rem; } .sd-report-chart-card--grow { /* takes remaining space — default */ } .sd-report-chart-card--fixed { /* width governed by grid column */ } @media (max-width: 1100px) { .sd-report-charts-row { grid-template-columns: 1fr; } } /* ── 26.4 SLA compliance colour classes ─────────────────────────────── */ .sd-compliance { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; min-width: 52px; text-align: center; } .sd-compliance--green { background: rgba(40,167,69,0.12); color: #1a7a35; border: 1px solid rgba(40,167,69,0.25); } .sd-compliance--amber { background: rgba(255,193,7,0.15); color: #8a6400; border: 1px solid rgba(255,193,7,0.35); } .sd-compliance--red { background: rgba(220,53,69,0.12); color: #9e1e2c; border: 1px solid rgba(220,53,69,0.25); } .sd-compliance--none { background: rgba(0,0,0,0.05); color: #9ca3af; border: 1px solid rgba(0,0,0,0.1); } /* Colour swatch used in legend */ .sd-compliance--swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 4px; } /* ── 26.5 SLA legend row ────────────────────────────────────────────── */ .sd-sla-legend { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1rem; font-size: 0.825rem; color: #555; } .sd-sla-legend__item { display: flex; align-items: center; gap: 5px; } /* ── 26.6 Breadcrumb ─────────────────────────────────────────────────── */ .sd-breadcrumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: #6b7280; margin-bottom: 0.35rem; } .sd-breadcrumb__link { color: #2980D4; text-decoration: none; } .sd-breadcrumb__link:hover { text-decoration: underline; } .sd-breadcrumb__sep { font-size: 0.65rem; color: #c0ccd8; } .sd-breadcrumb__current { color: #6b7280; } /* ── 26.7 CSAT star rating in stat card ─────────────────────────────── */ .sd-stat-card__sub { display: block; margin-top: 0.35rem; font-size: 0.9rem; opacity: 0.85; } /* ── 26.8 CSAT comment cell ─────────────────────────────────────────── */ .sd-table__cell--comment { max-width: 360px; } .sd-csat-comment { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: italic; color: #444; font-size: 0.85rem; } /* ── 26.9 Email log flag icons ───────────────────────────────────────── */ .sd-table__cell--flags { white-space: nowrap; text-align: center; } .sd-flag-icon { font-size: 0.85rem; margin: 0 2px; cursor: help; } .sd-flag-icon--blue { color: #2980D4; } .sd-flag-icon--green { color: #28A745; } .sd-flag-icon--teal { color: #0D9488; } .sd-flag-icon--red { color: #DC3545; } .sd-table__cell--email { max-width: 200px; } .sd-table__cell--subject { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── 26.10 Stat grid variants ───────────────────────────────────────── */ /* Base stat grid (used by email-log and other reports with 4-6 cards) */ .sd-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 1.25rem; } .sd-stat-grid--3 { grid-template-columns: repeat(3, 1fr); } .sd-stat-grid--1 { grid-template-columns: 1fr; } @media (max-width: 900px) { .sd-stat-grid--3 { grid-template-columns: 1fr 1fr; } } /* sd-stat-card inner layout (used in report stat grids) */ .sd-stat-card { background: #fff; border: 1px solid var(--color-grey-border); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-left: 4px solid var(--color-grey-border); } .sd-stat-card--blue { border-left-color: var(--color-blue-primary); } .sd-stat-card--green { border-left-color: var(--color-green); } .sd-stat-card--red { border-left-color: var(--color-red); } .sd-stat-card--amber { border-left-color: var(--color-amber); } .sd-stat-card--teal { border-left-color: var(--color-teal); } .sd-stat-card--warning { border-left-color: var(--color-amber); } .sd-stat-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .sd-stat-card__label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-grey-text); line-height: 1.3; } .sd-stat-card__value { font-size: 1.625rem; font-weight: 700; color: var(--color-navy); line-height: 1; } .sd-stat-card__sub { display: block; margin-top: 0.25rem; font-size: 0.85rem; color: var(--color-grey-text); } .sd-stat-card__icon-wrap { width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; background: var(--color-grey-bg); color: var(--color-grey-text); } .sd-stat-card--blue .sd-stat-card__icon-wrap { background: var(--color-blue-light); color: var(--color-blue-primary); } .sd-stat-card--green .sd-stat-card__icon-wrap { background: var(--color-green-light); color: var(--color-green); } .sd-stat-card--red .sd-stat-card__icon-wrap { background: var(--color-red-light); color: var(--color-red); } .sd-stat-card--amber .sd-stat-card__icon-wrap { background: var(--color-amber-light); color: var(--color-amber-dark); } .sd-stat-card--teal .sd-stat-card__icon-wrap { background: var(--color-teal-light); color: var(--color-teal); } .sd-stat-card--warning .sd-stat-card__icon-wrap { background: var(--color-amber-light); color: var(--color-amber-dark); } /* ── 26.11 Avatar initials inline ───────────────────────────────────── */ .sd-avatar-initials { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #e5eaf2; color: #1A2E4A; font-size: 0.7rem; font-weight: 700; margin-right: 6px; vertical-align: middle; flex-shrink: 0; } /* ── 26.12 Dot swatch in priority column ────────────────────────────── */ .sd-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; flex-shrink: 0; } /* ── 26.13 Table row separator ──────────────────────────────────────── */ .sd-table__row--sep td { border-top: 2px solid #e5edf5; } /* ── 26.14 Coloured badges for CSAT warning ─────────────────────────── */ .sd-badge--warning { background: rgba(255,193,7,0.15); color: #8a6400; border: 1px solid rgba(255,193,7,0.35); } .sd-badge--purple { background: rgba(124,58,237,0.12); color: #5b21b6; border: 1px solid rgba(124,58,237,0.25); } /* ── 26.15 Compact table variant ─────────────────────────────────────── */ .sd-table--compact td, .sd-table--compact th { padding: 0.45rem 0.75rem; font-size: 0.8rem; } .sd-table__sub { display: block; font-size: 0.75rem; color: #9ca3af; margin-top: 1px; } /* ============================================================ 27. SD-TOAST NOTIFICATIONS (used by partials/toast.blade.php) ============================================================ */ /* * Fixed top-right container. pointer-events:none on the wrapper * so only the toast cards themselves are clickable. */ .sd-toast-container { position: fixed; top: calc(var(--topbar-height, 56px) + 12px); right: 16px; z-index: var(--z-toast, 500); display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 360px; width: calc(100% - 32px); } /* * Individual toast card. * overflow:hidden is required so the progress bar is clipped cleanly. */ .sd-toast { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 18px; border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-toast, 0 4px 12px rgba(0,0,0,.15)); pointer-events: all; border-left: 4px solid transparent; background-color: var(--color-white, #fff); overflow: hidden; } /* ── Alpine enter/leave transition classes ── */ .sd-toast-enter { transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1); } .sd-toast-enter-start { opacity: 0; transform: translateX(calc(100% + 16px)); } .sd-toast-enter-end { opacity: 1; transform: translateX(0); } .sd-toast-leave { transition: opacity 0.3s ease, transform 0.3s ease; } .sd-toast-leave-start { opacity: 1; transform: translateX(0); } .sd-toast-leave-end { opacity: 0; transform: translateX(calc(100% + 16px)); } /* ── Icon ── */ .sd-toast__icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } /* ── Message text ── */ .sd-toast__message { font-size: var(--text-sm, 0.875rem); line-height: 1.45; color: var(--color-body-text, #2D3748); flex: 1; margin: 0; } /* * Close button — HIDDEN. * The toast dismisses automatically after 4 s; no X button needed. */ .sd-toast__close { display: none !important; } /* * Progress bar — shrinks from 100% to 0% over 4 seconds, * matching the Alpine auto-dismiss timer. */ .sd-toast__progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px); animation: sdToastProgress 4s linear forwards; transform-origin: left center; } @keyframes sdToastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ── Colour variants ── */ .sd-toast--success { border-left-color: var(--color-green, #28A745); } .sd-toast--success .sd-toast__icon { color: var(--color-green, #28A745); } .sd-toast--success .sd-toast__progress { background-color: var(--color-green, #28A745); } .sd-toast--error { border-left-color: var(--color-red, #DC3545); } .sd-toast--error .sd-toast__icon { color: var(--color-red, #DC3545); } .sd-toast--error .sd-toast__progress { background-color: var(--color-red, #DC3545); } .sd-toast--warning { border-left-color: var(--color-amber, #FFC107); } .sd-toast--warning .sd-toast__icon { color: var(--color-amber-dark, #856404); } .sd-toast--warning .sd-toast__progress { background-color: var(--color-amber, #FFC107); } .sd-toast--info { border-left-color: var(--color-blue-primary, #2980D4); } .sd-toast--info .sd-toast__icon { color: var(--color-blue-primary, #2980D4); } .sd-toast--info .sd-toast__progress { background-color: var(--color-blue-primary, #2980D4); } /* Mobile: stack at bottom */ @media (max-width: 767px) { .sd-toast-container { top: auto; bottom: 12px; right: 12px; left: 12px; max-width: none; width: auto; } } /* ============================================================ 28. FLASH ALERT — AUTO-DISMISS ============================================================ */ /* * Smooth auto-dismiss for inline sd-alert flash banners. * The animation fades opacity out first (0–60%), then collapses * height, padding and margin (60–100%) so the page content below * slides up gradually rather than jumping. */ @keyframes sdAlertDismiss { 0% { opacity: 1; max-height: 80px; margin-bottom: 16px; padding-top: 12px; padding-bottom: 12px; } 60% { opacity: 0; max-height: 80px; margin-bottom: 16px; padding-top: 12px; padding-bottom: 12px; } 100% { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; } } .sd-alert--autodismiss { animation: sdAlertDismiss 0.6s ease 4s forwards; overflow: hidden; } /* ============================================================ 29. SD-STAT-LIST (Email Config sidebar queue stats widget) ============================================================ */ /* * Compact key-value list used in sidebar cards (e.g. Email Queue Stats). * Mirrors the sd-stat-card visual language but stacks vertically so it * fits neatly inside the narrow sidebar column. */ .sd-stat-list { list-style: none; margin: 0; padding: 0; } .sd-stat-list__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-bottom: 1px solid #eef0f3; font-size: 0.8125rem; transition: background 0.12s; } .sd-stat-list__item:last-child { border-bottom: none; } .sd-stat-list__item:hover { background: #f8f9fa; } /* Highlighted total row */ .sd-stat-list__item--total { background: #f4f6f8; font-weight: 600; } .sd-stat-list__item--total:hover { background: #eef1f5; } /* Label (left side) */ .sd-stat-list__label { color: #4a5568; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; } .sd-stat-list__item--total .sd-stat-list__label { color: #1A2E4A; font-weight: 700; } /* Value (right side) — base style */ .sd-stat-list__value { font-size: 1.125rem; font-weight: 700; color: #1A2E4A; white-space: nowrap; min-width: 28px; text-align: right; line-height: 1; } /* Colour variants — match sd-stat-card accent colours */ .sd-stat-list__value--blue { color: var(--color-blue-primary, #2980D4); } .sd-stat-list__value--green { color: var(--color-green, #28A745); } .sd-stat-list__value--amber { color: var(--color-amber-dark, #856404); } .sd-stat-list__value--red { color: var(--color-red, #DC3545); } .sd-stat-list__value--teal { color: var(--color-teal, #1ABC9C); } /* Pill badge variant — draws a small coloured bubble around the number */ .sd-stat-list__value--pill { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 2px 8px; border-radius: 12px; font-size: 0.8125rem; } .sd-stat-list__value--blue.sd-stat-list__value--pill { background: var(--color-blue-light, #D6EAF8); } .sd-stat-list__value--green.sd-stat-list__value--pill { background: var(--color-green-light, #D4EDDA); } .sd-stat-list__value--amber.sd-stat-list__value--pill { background: var(--color-amber-light, #FFF3CD); } .sd-stat-list__value--red.sd-stat-list__value--pill { background: var(--color-red-light, #F8D7DA); } /* ============================================================ 30. SD — DESIGN SYSTEM COMPONENTS (Admin UI) Form elements, layout primitives, and page-level components used across all admin views. ============================================================ */ /* ── 30.1 Input Group (text input + appended button/addon) ── */ /* * Usage: *

* * *

*/ .sd-input-group { display: flex; align-items: stretch; } .sd-input-group .sd-input, .sd-input-group__input { flex: 1; min-width: 0; border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); } /* Keep error border visible on the right when in a group */ .sd-input-group .sd-input--error, .sd-input-group__input.sd-input--error { border-right: 1px solid var(--color-red); } .sd-input-group__btn { flex-shrink: 0; padding: 0 12px; background-color: var(--color-grey-light); border: 1px solid var(--color-grey-border); border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; cursor: pointer; color: var(--color-grey-text); font-size: var(--text-base); line-height: 1; transition: background-color var(--transition-fast), color var(--transition-fast); display: flex; align-items: center; justify-content: center; gap: 6px; } .sd-input-group__btn:hover { background-color: #e2e6ea; color: var(--color-body-text); } .sd-input-group__btn:focus-visible { outline: 3px solid rgba(41, 128, 212, 0.4); outline-offset: 1px; z-index: 1; position: relative; } /* Text/icon addon (non-interactive) */ .sd-input-group__addon { flex-shrink: 0; padding: 0 12px; display: flex; align-items: center; background-color: var(--color-grey-light); border: 1px solid var(--color-grey-border); color: var(--color-grey-text); font-size: var(--text-sm); white-space: nowrap; } .sd-input-group__addon--prefix { border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .sd-input-group__addon--prefix + .sd-input, .sd-input-group__addon--prefix + .sd-input-group__input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-right: 1px solid var(--color-grey-border); } /* ── 30.2 Toggle Switch ──────────────────────────────────── */ /* * Usage: *

* * * * * *

* Feature name * Helper text explaining the toggle. *

*/ /* Outer wrapper: toggle + label side-by-side */ .sd-toggle-row { display: flex; align-items: center; gap: 12px; } /* The element that wraps the checkbox and slider */ .sd-toggle { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; width: 44px; height: 24px; cursor: pointer; } /* Hide the real checkbox visually but keep it accessible */ .sd-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; } /* The sliding track */ .sd-toggle__slider { position: absolute; inset: 0; background-color: var(--color-grey-mid); border-radius: var(--radius-full); transition: background-color var(--transition-base); } /* The circular knob */ .sd-toggle__slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background-color: var(--color-white); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--transition-base); } /* Checked state: blue track, knob slides right */ .sd-toggle__input:checked + .sd-toggle__slider { background-color: var(--color-blue-primary); } .sd-toggle__input:checked + .sd-toggle__slider::after { transform: translateX(20px); } /* Focus ring (keyboard nav) */ .sd-toggle__input:focus-visible + .sd-toggle__slider { outline: 3px solid rgba(41, 128, 212, 0.4); outline-offset: 2px; } /* Label text block (sits to the right of the toggle) */ .sd-toggle-row__label { display: flex; flex-direction: column; gap: 2px; } .sd-toggle-row__title { font-size: var(--text-md); font-weight: 600; color: var(--color-heading-text); line-height: 1.3; } .sd-toggle-row__desc { font-size: var(--text-base); color: var(--color-grey-text); line-height: 1.4; } /* Legacy aliases — kept for backwards compat with any existing blades */ .sd-toggle-wrap { display: flex; align-items: center; gap: 12px; } .sd-toggle-label { display: flex; flex-direction: column; gap: 2px; } .sd-toggle-label__title { font-size: var(--text-md); font-weight: 600; color: var(--color-heading-text); line-height: 1.3; } .sd-toggle-label__desc { font-size: var(--text-base); color: var(--color-grey-text); line-height: 1.4; } /* ============================================================ 31. EMAIL LOG — DETAIL PANEL & ROW STYLES ============================================================ */ /* Danger row highlight (error outcomes) */ .sd-table__row--danger { background-color: #fff5f5 !important; } .sd-table__row--danger:hover { background-color: #fee2e2 !important; } /* Detail panel inside expandable row */ .sd-table__td--detail { padding: 0 !important; background-color: #f8f9fa; border-top: none; } .sd-detail-panel { padding: 14px 20px; display: flex; flex-direction: column; gap: 8px; border-top: 2px solid #e1e4e8; } .sd-detail-panel__row { display: flex; gap: 12px; font-size: 0.8125rem; align-items: flex-start; flex-wrap: wrap; } .sd-detail-panel__label { font-weight: 600; color: #555; white-space: nowrap; min-width: 160px; flex-shrink: 0; } .sd-detail-panel__row--danger .sd-detail-panel__label { color: var(--color-red); } .sd-detail-panel__row--danger span:last-child { color: #7a1a25; font-family: var(--font-mono); font-size: 0.775rem; word-break: break-all; } .sd-code-inline { font-family: var(--font-mono); font-size: 0.775rem; background: #e9ecef; padding: 2px 6px; border-radius: 4px; color: #333; word-break: break-all; } /* ============================================================ 32. FOOTER BAR ============================================================ */ .sd-footer { width: 100%; background-color: var(--color-navy, #1a2b4a); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 10px 24px; flex-shrink: 0; } .sd-footer__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: var(--text-xs, 0.75rem); color: rgba(255, 255, 255, 0.55); } .sd-footer__app-name { font-weight: 600; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.01em; } .sd-footer__version { color: rgba(255, 255, 255, 0.55); } .sd-footer__copyright { color: rgba(255, 255, 255, 0.55); } .sd-footer__divider { color: rgba(255, 255, 255, 0.25); font-size: 0.6rem; line-height: 1; } /* Guest layout footer adjustment */ .sd-guest-body .sd-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; background-color: rgba(15, 28, 56, 0.92); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ============================================================ END OF SNOWMAN DESIGN — snowman.css (v2.0) ============================================================ */