/* ═══════════════════════════════════════════════════════ ELEVATED SOFTWARE — Ikonic Construction Design System ═══════════════════════════════════════════════════════ */ /* Click affordance for design item titles */ .design-item-name { cursor: pointer; } /* Font loaded via in HTML head */ /* ── Foundation Tokens ── */ :root { --primary: #9f8c5b; --primary-deep: #8a7a4e; --primary-mild: #b5a372; --primary-subtle: #f8f5ef; --primary-text: #ffffff; --primary-icon: #000000; --success: #0caf60; --success-subtle: #e6f7ef; --warning: #e5920a; --warning-subtle: #fef3e2; --danger: #e03e56; --danger-subtle: #fde8ec; --purple: #7c5ce0; --purple-subtle: #f0ebff; --blue: #0078d4; --blue-subtle: #e6f1fb; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --sidebar-bg: #1a1a1a; --sidebar-text: #94a3b8; --sidebar-hover: rgba(255, 255, 255, 0.06); --sidebar-active: #9f8c5b; --sidebar-border: rgba(255, 255, 255, 0.08); --surface: #ffffff; --surface-warm: #fafafa; --surface-raised: #ffffff; --card-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.06); --card-shadow-hover: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.04); --card-shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.1), 0 2px 8px rgba(17, 24, 39, 0.04); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --bg-secondary: var(--gray-50); --text-primary: var(--gray-900); --text-secondary: var(--gray-500); --text-muted: var(--gray-400); --border: var(--gray-200); --header-height: 96px; } /* ── Reset & Base ── */ @keyframes spin { 0% { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } @keyframes countUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--gray-100); color: var(--gray-800); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--primary); color: #ffffff; } /* ── Layout ── */ .app-container { display: flex; min-height: 100vh; } /* ── Sidebar ── */ .sidebar { width: 68px; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: fixed; height: 100vh; z-index: 100; transition: width 0.25s var(--ease-out); border-right: 1px solid var(--sidebar-border); overflow: hidden; } .sidebar.expanded { width: 264px; } /* Override expanded class when localStorage says collapsed (set on before render) */ .sidebar-collapsed .sidebar.expanded { width: 68px; } .sidebar-collapsed .main-content { margin-left: 68px !important; } .sidebar-collapsed .sidebar.expanded .sidebar-header { justify-content: center; padding: 12px; } .sidebar-collapsed .sidebar.expanded .sidebar-header img { display: none; } .sidebar-collapsed .sidebar.expanded .sidebar-collapse-btn { transform: none; } .sidebar-collapsed .sidebar.expanded .nav-item { justify-content: center; padding: 11px 0; width: 44px; margin: 0 auto; gap: 0; } .sidebar-collapsed .sidebar.expanded .nav-item span { opacity: 0; width: 0; overflow: hidden; } .sidebar-collapsed .sidebar.expanded .sidebar-footer { font-size: 0; padding: 8px; } .sidebar-collapsed .sidebar.expanded .sidebar-nav { padding: 12px 10px; } .sidebar-header { padding: 12px; border-bottom: 1px solid var(--sidebar-border); display: flex; align-items: center; justify-content: center; min-height: 64px; gap: 8px; } .sidebar:not(.expanded) .sidebar-header img { display: none; } .sidebar.expanded .sidebar-header { justify-content: space-between; padding: 16px 20px; } .sidebar-header img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; box-sizing: border-box; width: 32px !important; transition: width 0.25s var(--ease-out); } .sidebar.expanded .sidebar-header img { width: 160px !important; } .sidebar-logo { width: 200px; height: auto; flex-shrink: 0; } .sidebar-brand { display: flex; flex-direction: column; } .sidebar-brand-name { font-size: 16px; font-weight: 600; color: var(--gray-900); } .sidebar-brand-tagline { font-size: 11px; color: var(--gray-500); } .sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(159, 140, 91, 0.15) transparent; } .sidebar.expanded .sidebar-nav { padding: 12px 14px; } .sidebar-footer { padding: 12px 10px; border-top: 1px solid var(--sidebar-border); text-align: center; font-size: 10px; letter-spacing: 0.04em; color: var(--sidebar-text); opacity: 0.5; line-height: 1.5; overflow: hidden; white-space: nowrap; } .sidebar:not(.expanded) .sidebar-footer { font-size: 0; padding: 8px; } .sidebar-footer strong { color: var(--sidebar-text); opacity: 0.8; } .nav-section { margin-bottom: 2px; } .nav-menu-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 16px; background: none; border: 0; font-family: inherit; border-radius: var(--radius-md); color: var(--sidebar-text); cursor: pointer; transition: all 0.2s var(--ease-out); } .nav-menu-toggle:hover { background: var(--sidebar-hover); color: #e2e8f0; } .nav-menu-toggle:hover svg, .nav-single .nav-item:hover svg { color: var(--primary-mild); } .nav-menu-left { display: flex; align-items: center; gap: 14px; } .nav-menu-left svg { width: 20px; height: 20px; flex-shrink: 0; color: #64748b; transition: color 0.2s; } .nav-menu-left span { color: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0.01em; } .nav-menu-arrow { width: 16px; height: 16px; color: rgba(156, 163, 175, 0.4); transition: transform 0.25s var(--ease-out), color 0.2s; } .nav-section.open .nav-menu-arrow { transform: rotate(90deg); color: var(--primary-mild); } .nav-submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease-out); } .nav-section.open .nav-submenu { max-height: 500px; } .nav-submenu .nav-item { padding: 9px 16px 9px 50px; font-size: 13.5px; border-radius: var(--radius-sm); position: relative; letter-spacing: 0.01em; } .nav-submenu .nav-item::before { content: ''; position: absolute; left: 32px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #475569; transform: translateY(-50%); transition: background 0.2s; } .nav-submenu .nav-item:hover::before, .nav-submenu .nav-item.active::before { background: var(--primary-mild); } .nav-single { margin-bottom: 2px; } .nav-item { display: flex; align-items: center; gap: 14px; padding: 11px 14px; color: var(--sidebar-text); text-decoration: none; border-radius: var(--radius-md); transition: all 0.2s var(--ease-out); font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; } .sidebar:not(.expanded) .nav-item { justify-content: center; padding: 11px 0; width: 44px; margin: 0 auto; gap: 0; } .nav-item span { opacity: 1; transition: opacity 0.2s var(--ease-out); } .sidebar:not(.expanded) .nav-item span { opacity: 0; width: 0; overflow: hidden; } .nav-item svg { width: 20px; height: 20px; flex-shrink: 0; color: #6b7280; transition: color 0.2s; } .nav-item:hover { background: var(--sidebar-hover); color: #e2e8f0; } .nav-item.active { background: rgba(159, 140, 91, 0.2); color: var(--primary-mild); } .nav-item.active svg { color: var(--primary-mild); } .nav-section.open .nav-menu-toggle { color: #e2e8f0; } .nav-section.open .nav-menu-left svg { color: var(--primary-mild); } /* Sidebar collapse toggle */ .sidebar-collapse-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--sidebar-text); opacity: 0.4; border-radius: var(--radius-sm); cursor: pointer; transition: opacity 0.2s, background 0.2s, transform 0.25s var(--ease-out); flex-shrink: 0; } .sidebar.expanded .sidebar-collapse-btn { transform: rotate(180deg); } .sidebar-collapse-btn:hover { opacity: 1; background: var(--sidebar-hover); } /* ── Main Content ── */ .main-content { flex: 1; min-width: 0; margin-left: 68px; transition: margin-left 0.25s var(--ease-out); min-height: 100vh; } /* ── Header ── */ .header { padding: 0 36px; display: flex; align-items: center; justify-content: space-between; background: #f3f4f6; border-bottom: 1px solid rgba(229, 231, 235, 0.6); position: sticky; top: 0; z-index: 50; min-height: var(--header-height); box-sizing: border-box; } .header-left { display: flex; align-items: center; gap: 16px; } .header-title { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--gray-900); } .header-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-400); } .header-breadcrumb a { color: var(--gray-500); text-decoration: none; transition: color 0.2s; } .header-breadcrumb a:hover { color: var(--primary); } .header-breadcrumb svg { width: 14px; height: 14px; } .header-right { display: flex; align-items: center; gap: 12px; } .header-search { position: relative; width: 280px; } .header-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--gray-400); } .header-search input { width: 100%; padding: 9px 14px 9px 40px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); font-family: inherit; font-size: 13px; color: var(--gray-800); background: var(--gray-50); transition: all 0.2s; outline: none; } .header-search input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px rgba(159, 140, 91, 0.1); } .header-search input::placeholder { color: var(--gray-400); } .header-actions { display: flex; align-items: center; gap: 8px; } .header-icon-btn { width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--gray-200); background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; position: relative; } .header-icon-btn svg { width: 18px; height: 18px; color: var(--gray-600); } .header-icon-btn:hover { background: var(--gray-50); border-color: var(--gray-300); } .notification-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 1.5px solid var(--surface); } .user-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gray-900); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.2s; } .user-avatar:hover { transform: scale(1.05); } /* ── Page Content ── */ .page-content { padding: 32px 36px; } /* ── Stats Grid ── */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; } .stat-card { background: var(--surface); border-radius: var(--radius-xl); padding: 24px; border: 1px solid rgba(229, 231, 235, 0.5); box-shadow: var(--card-shadow); position: relative; overflow: hidden; animation: fadeInUp 0.5s var(--ease-out) both; } .stat-card:nth-child(1) { animation-delay: 0s; } .stat-card:nth-child(2) { animation-delay: 0.05s; } .stat-card:nth-child(3) { animation-delay: 0.1s; } .stat-card:nth-child(4) { animation-delay: 0.15s; } .stat-card-icon { position: absolute; bottom: -8px; right: -4px; opacity: 0.08; width: 72px; height: 72px; pointer-events: none; overflow: hidden; } .stat-card-icon svg { width: 72px !important; height: 72px !important; max-width: 72px; max-height: 72px; display: block; } .stat-value { font-family: var(--font-display); font-size: 32px; font-weight: 400; color: var(--gray-900); line-height: 1.1; margin-bottom: 4px; animation: countUp 0.6s var(--ease-out) both; } .stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-500); } .stat-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 20px; margin-left: 8px; } .stat-trend.up { background: var(--success); color: #fff; } .stat-trend.down { background: var(--danger); color: #fff; } .stat-trend svg { width: 14px; height: 14px; } /* ── Cards ── */ .card { background: var(--surface); border-radius: var(--radius-xl); border: 1px solid rgba(229, 231, 235, 0.5); box-shadow: var(--card-shadow); animation: fadeInUp 0.5s var(--ease-out) both; } .card-header { padding: 20px 24px; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; } .card-title { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--gray-900); } .card-subtitle { font-size: 13px; color: var(--gray-500); margin-top: 2px; } .card-body { padding: 20px 24px; } .card-body-flush { padding: 0; } .card-footer { padding: 16px 24px; border-top: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; } .header-stats { display: flex; gap: 24px; } .header-stat { text-align: center; } .header-stat-value { font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 1.1; } .header-stat-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-400); margin-top: 2px; } .card-header-right { display: flex; align-items: center; gap: 12px; } .fullscreen-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--gray-400); transition: all 0.2s; } .fullscreen-btn:hover { color: var(--gray-700); background: var(--gray-50); } .fullscreen-btn svg { width: 16px; height: 16px; } /* ── Grid Layouts ── */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; } .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; } /* ── Tables ── */ table { width: 100%; border-collapse: collapse; } thead th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-500); border-bottom: 1px solid var(--gray-200); background: var(--gray-50); white-space: nowrap; } tbody td { padding: 14px 16px; font-size: 13.5px; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); } tbody tr { transition: background 0.15s; } tbody tr:hover { background: rgba(243, 244, 246, 0.4); } tbody tr:last-child td { border-bottom: none; } td a { color: var(--gray-900); font-weight: 600; text-decoration: none; transition: color 0.2s; } td a:hover { color: var(--primary); text-decoration: underline; } td.text-right, th.text-right { text-align: right; } td.text-center, th.text-center { text-align: center; } td.font-medium { font-weight: 500; } td.font-semibold { font-weight: 600; } .table-footer-row td, tfoot td { font-weight: 700; background: var(--gray-50); border-top: 2px solid var(--gray-200); color: var(--gray-900); padding: 14px 20px; font-size: 13.5px; } .table-footer-row td:first-child, tfoot tr:last-child td:first-child { border-bottom-left-radius: var(--radius-xl); } .table-footer-row td:last-child, tfoot tr:last-child td:last-child { border-bottom-right-radius: var(--radius-xl); } /* ── Badges ── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-sm); font-size: 11.5px; font-weight: 600; white-space: nowrap; } .badge-blue { background: var(--blue); color: #fff; } .badge-green { background: var(--success); color: #fff; } .badge-orange { background: var(--warning); color: #fff; } .badge-red { background: var(--danger); color: #fff; } .badge-purple { background: var(--purple); color: #fff; } .badge-gray { background: var(--gray-400); color: #fff; } .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ── Badge Dropdown ── */ .badge-dropdown-wrap { position: relative; display: inline-flex; } .badge-dropdown-wrap .badge { cursor: pointer; transition: opacity 0.15s; } .badge-dropdown-wrap .badge:hover { opacity: 0.8; } .badge-dropdown-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 200; min-width: 180px; background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 4px; display: none; } .badge-dropdown-wrap.open .badge-dropdown-menu { display: block; } .badge-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: none; background: none; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--gray-700); cursor: pointer; border-radius: var(--radius-sm); transition: background 0.1s; text-align: left; } .badge-dropdown-item:hover { background: var(--gray-50); } .badge-dropdown-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .badge-dropdown-divider { height: 1px; background: var(--gray-100); margin: 4px 0; } .badge-dropdown-item.create-new { color: var(--primary); } .badge-dropdown-item.create-new svg { width: 14px; height: 14px; } /* Badge teal (for custom) */ .badge-teal { background: #0d9488; color: #fff; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-md); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all 0.2s var(--ease-out); white-space: nowrap; text-decoration: none; } .btn svg { width: 16px; height: 16px; } .btn-primary { background: var(--primary); color: #ffffff; border-color: var(--primary); } .btn-primary:hover { background: var(--primary-deep); border-color: var(--primary-deep); transform: translateY(-1px); } .btn-secondary { background: var(--gray-100); color: var(--gray-700); border-color: var(--gray-200); } .btn-secondary:hover { background: var(--gray-200); transform: translateY(-1px); } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { opacity: 0.9; transform: translateY(-1px); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { opacity: 0.9; transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--gray-700); border-color: var(--gray-200); } .btn-outline:hover { background: var(--gray-50); border-color: var(--gray-300); } .btn-sm { padding: 6px 14px; font-size: 12.5px; } .btn-lg { padding: 14px 28px; font-size: 15px; } .btn:active { transform: scale(0.985); } /* ── Tabs ── */ .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--gray-200); margin-bottom: 24px; } .tab-btn { padding: 12px 20px; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--gray-500); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .tab-btn:hover { color: var(--gray-800); } .tab-btn.active { color: var(--gray-900); border-bottom-color: var(--primary); font-weight: 600; } .tab-pane { display: none; } .tab-pane.active { display: block; animation: fadeInUp 0.3s var(--ease-out); } /* ── Forms ── */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-600); margin-bottom: 6px; } .form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; color: var(--gray-800); background: var(--surface); transition: all 0.2s; outline: none; } .form-input-inline, .form-select-inline { width: 100%; padding: 6px 10px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; color: var(--gray-800); background: var(--surface); transition: all 0.2s; outline: none; } .form-input-inline:focus, .form-select-inline:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(159, 140, 91, 0.1); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(159, 140, 91, 0.1); } .form-textarea { resize: vertical; min-height: 200px; } .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .form-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .form-hint { font-size: 12px; color: var(--gray-400); margin-top: 4px; } /* ── Modals ── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease-out); } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow-lg); width: 90%; max-width: 640px; max-height: 90vh; overflow-y: auto; transform: scale(0.96) translateY(8px); transition: transform 0.25s var(--ease-out); } .modal-overlay.active .modal { transform: scale(1) translateY(0); } .modal-lg { max-width: 900px; } .modal-xl { max-width: 1100px; } .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; background: var(--surface); z-index: 10; border-radius: var(--radius-xl) var(--radius-xl) 0 0; display: flex; align-items: center; justify-content: space-between; } .modal-title { font-family: var(--font-display); font-size: 20px; font-weight: 400; } .modal-close { width: 32px; height: 32px; border: none; background: var(--gray-100); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--gray-500); transition: all 0.2s; } .modal-close:hover { background: var(--gray-200); color: var(--gray-800); } .modal-body { padding: 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: flex-end; gap: 12px; position: sticky; bottom: 0; background: var(--surface); z-index: 10; } /* ── Modal Header Actions ── */ .modal-header-actions { display: flex; align-items: center; gap: 4px; } .modal-icon-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--gray-400); border-radius: var(--radius-sm); cursor: pointer; transition: color 0.15s, background 0.15s; } .modal-icon-btn:hover { color: var(--gray-700); background: var(--gray-100); } /* ── Dynamic Cost Sections ── */ .est-cost-section { margin-bottom: 20px; } .est-cost-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .est-cost-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); border: none; background: none; padding: 0; outline: none; flex: 1; min-width: 0; font-family: inherit; } .est-cost-section-title:focus { color: var(--gray-900); } .est-cost-section-title::after { content: ''; display: block; } .est-cost-section-total { font-size: 13px; font-weight: 600; color: var(--primary); white-space: nowrap; } .est-cost-section-divider { flex: 1; height: 1px; background: var(--gray-200); } .est-cost-section-btn { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--gray-300); border-radius: var(--radius-sm); cursor: pointer; transition: color 0.15s; } .est-cost-section-btn.danger:hover { color: var(--danger); } .est-cost-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; } .est-cost-item { position: relative; } .est-cost-item-label { font-size: 13px; font-weight: 500; color: var(--gray-700); margin-bottom: 4px; display: block; border: none; background: none; padding: 0; outline: none; width: 100%; font-family: inherit; } .est-cost-item-label:focus { color: var(--gray-900); } .est-cost-item-label::placeholder { color: var(--gray-400); font-weight: 400; } .est-cost-item-remove { position: absolute; top: 0; right: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--gray-300); border-radius: var(--radius-sm); cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s; } .est-cost-item:hover .est-cost-item-remove { opacity: 1; } .est-cost-item-remove:hover { color: var(--danger); } .est-cost-add-item { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--primary); cursor: pointer; border: none; background: none; padding: 4px 0; font-family: inherit; transition: color 0.15s; } .est-cost-add-item:hover { color: var(--primary-deep); } /* ── Labour Trade > Subcontractor hierarchy ── */ .est-trade-group { margin-bottom: 16px; } .est-trade-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--gray-50); border-radius: var(--radius-md); cursor: pointer; user-select: none; margin-bottom: 4px; } .est-trade-header:hover { background: var(--gray-100); } .est-trade-chevron { width: 16px; height: 16px; color: var(--gray-400); flex-shrink: 0; transition: transform 0.2s; } .est-trade-group.collapsed .est-trade-chevron { transform: rotate(-90deg); } .est-trade-label { font-size: 13px; font-weight: 600; color: var(--gray-700); flex: 1; min-width: 0; } .est-trade-total { font-size: 13px; font-weight: 600; color: var(--primary); white-space: nowrap; } .est-trade-remove { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--gray-300); border-radius: var(--radius-sm); cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s; } .est-trade-header:hover .est-trade-remove { opacity: 1; } .est-trade-remove:hover { color: var(--danger); } .est-trade-subs { padding-left: 24px; margin-top: 4px; } .est-trade-group.collapsed .est-trade-subs { display: none; } .est-sub-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--gray-100); } .est-sub-item:last-child { border-bottom: none; } .est-sub-name { font-size: 13px; color: var(--gray-600); flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; } .est-sub-name svg { width: 14px; height: 14px; color: var(--gray-400); flex-shrink: 0; } .est-sub-item .form-input { width: 120px; flex-shrink: 0; text-align: right; } .est-sub-remove { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--gray-300); border-radius: var(--radius-sm); cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s; } .est-sub-item:hover .est-sub-remove { opacity: 1; } .est-sub-remove:hover { color: var(--danger); } .est-trade-add-sub { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--primary); cursor: pointer; border: none; background: none; padding: 6px 0; font-family: inherit; transition: color 0.15s; } .est-trade-add-sub:hover { color: var(--primary-deep); } .est-sub-select { font-size: 12px; padding: 4px 8px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: white; color: var(--gray-700); font-family: inherit; cursor: pointer; margin-top: 4px; } .est-labour-section .est-cost-items { display: block; } /* ── Estimate Summary ── */ .est-summary { background: var(--gray-50); border-radius: var(--radius-lg); padding: 4px 0; margin-bottom: 16px; overflow: hidden; } .est-summary-table { width: 100%; border-collapse: collapse; } .est-summary-table td { padding: 8px 20px; font-size: 13px; } .est-summary-row-label { color: var(--gray-600); font-weight: 500; } .est-summary-row-value { text-align: right; font-weight: 600; color: var(--gray-900); white-space: nowrap; } .est-summary-pct { font-weight: 400; color: var(--gray-400); font-size: 12px; } .est-summary-subtotal { border-top: 1px solid var(--gray-200); } .est-summary-subtotal td { padding-top: 12px; font-weight: 600; font-size: 14px; } .est-summary-subtotal .est-summary-row-label { color: var(--gray-800); } .est-summary-subtotal .est-summary-row-value { color: var(--primary); font-size: 16px; } .est-summary-total { border-top: 2px solid var(--primary); background: var(--primary-subtle); } .est-summary-total td { padding: 14px 20px; font-weight: 700; font-size: 15px; } .est-summary-total .est-summary-row-label { color: var(--gray-900); } .est-summary-total .est-summary-row-value { color: var(--primary); font-size: 20px; } /* ── Quill Editor ── */ .ql-toolbar.ql-snow { border: none; border-bottom: 1px solid var(--gray-200); padding: 8px 16px; } .ql-container.ql-snow { border: none; font-family: inherit; font-size: 14px; } .ql-editor { padding: 20px 24px; min-height: 400px; line-height: 1.7; color: var(--gray-700); } .ql-editor h2 { font-size: 16px; font-weight: 600; color: var(--gray-900); margin-top: 8px; margin-bottom: 8px; } .ql-editor ul, .ql-editor ol { padding-left: 0; } .ql-editor li { padding-left: 4px; margin-bottom: 2px; } /* ── Service Groups ── */ .svc-group { border-bottom: 1px solid var(--gray-100); } .svc-group:last-child { border-bottom: none; } .svc-group-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 16px; border: none; background: none; cursor: pointer; font-family: inherit; transition: background 0.15s; } .svc-group-header:hover { background: var(--gray-50); } .svc-group-left { display: flex; align-items: center; gap: 10px; } .svc-group-arrow { width: 16px; height: 16px; color: var(--gray-400); transition: transform 0.2s var(--ease-out); flex-shrink: 0; } .svc-group.open .svc-group-arrow { transform: rotate(90deg); } .svc-group-title { font-size: 14px; font-weight: 600; color: var(--gray-800); } .svc-group-count { font-size: 12px; color: var(--gray-400); } .svc-group-items { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease-out); } .svc-group.open .svc-group-items { max-height: 2000px; } .svc-group-items table { width: 100%; border-collapse: collapse; } .svc-group-items table th { padding: 8px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-400); border-bottom: 1px solid var(--gray-100); text-align: left; } .svc-group-items table td { padding: 10px 16px; font-size: 13px; border-bottom: 1px solid var(--gray-100); vertical-align: top; } .svc-group-items table tr.completed td { text-decoration: line-through; color: var(--gray-400); } .svc-group-items table tr.completed td:first-child { text-decoration: none; } .svc-group-items table .svc-item-check { width: 22px; height: 22px; } .svc-group-items table tr.completed .svc-item-check { background: var(--success); border-color: var(--success); } .svc-group-items table tr.completed .svc-item-check svg { opacity: 1; } .svc-item { padding: 8px 16px 8px 16px; font-size: 13px; color: var(--gray-600); border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; gap: 10px; } .svc-item-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--gray-300); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: none; padding: 0; } .svc-item-check:hover { border-color: var(--success); } .svc-item-check svg { width: 12px; height: 12px; opacity: 0; color: #fff; transition: opacity 0.15s; } .svc-item.completed .svc-item-check { background: var(--success); border-color: var(--success); } .svc-item.completed .svc-item-check svg { opacity: 1; } .svc-item.completed .svc-item-text { text-decoration: line-through; color: var(--gray-400); border-color: var(--gray-100); background: var(--gray-50); } .svc-item:hover { background: var(--gray-50); } .svc-item-text { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 13px; background: var(--surface); color: var(--gray-700); line-height: 1.4; } .svc-item .svc-item-remove { opacity: 0; flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--gray-300); cursor: pointer; border-radius: var(--radius-sm); transition: opacity 0.15s, color 0.15s; } .svc-item:hover .svc-item-remove { opacity: 1; } .svc-item .svc-item-remove:hover { color: var(--danger); } .svc-add-item { display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 12px; font-weight: 500; color: var(--primary); cursor: pointer; border: none; background: none; font-family: inherit; width: 100%; transition: color 0.15s; } .svc-add-item:hover { color: var(--primary-deep); background: var(--gray-50); } /* ── Material Sub-rows ── */ .mat-parent td:first-child { cursor: pointer; } .mat-parent td:first-child::before { content: ''; display: inline-block; width: 0; height: 0; border-left: 5px solid var(--gray-400); border-top: 4px solid transparent; border-bottom: 4px solid transparent; margin-right: 8px; transition: transform 0.2s; vertical-align: middle; } .mat-parent.open td:first-child::before { transform: rotate(90deg); } .mat-sub-row { display: none; } .mat-parent.open + .mat-sub-row { display: table-row; } .mat-sub-container { padding: 8px 16px 8px 32px; } .mat-sub-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--gray-600); border-bottom: 1px solid var(--gray-50); } .mat-sub-item:last-child { border-bottom: none; } .mat-sub-item-text { flex: 1; } .mat-sub-item-remove { opacity: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--gray-300); cursor: pointer; border-radius: var(--radius-sm); transition: opacity 0.15s, color 0.15s; } .mat-sub-item:hover .mat-sub-item-remove { opacity: 1; } .mat-sub-item-remove:hover { color: var(--danger); } .mat-sub-add { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; font-size: 12px; font-weight: 500; color: var(--primary); cursor: pointer; border: none; background: none; font-family: inherit; } .mat-sub-add:hover { color: var(--primary-deep); } /* ── Estimate Edit Footer ── */ #estFooterEdit { justify-content: space-between; } .est-footer-status-label { display: flex; align-items: center; } .est-footer-status-actions { display: flex; gap: 8px; } /* ── Pipeline / Stage Visualisation ── */ .pipeline { display: flex; flex-direction: row; align-items: center; gap: 0; padding: 20px 24px; overflow-x: auto; } .pipeline-stage { flex: 1 1 0; text-align: center; padding: 16px 12px; position: relative; min-width: 120px; } .pipeline-stage::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--gray-200); } .pipeline-stage:last-child::after { display: none; } .pipeline-dot { width: 12px; height: 12px; border-radius: 50%; margin: 0 auto 8px; } .pipeline-count { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--gray-900); line-height: 1.1; } .pipeline-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-500); margin-top: 4px; } /* ── Progress Bar ── */ .progress-bar { height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; } .progress-fill { height: 100%; border-radius: 3px; transition: width 0.8s var(--ease-out); } .progress-fill.green { background: var(--success); } .progress-fill.blue { background: var(--blue); } .progress-fill.orange { background: var(--warning); } .progress-fill.red { background: var(--danger); } .progress-fill.purple { background: var(--purple); } /* ── Activity Feed ── */ .activity-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--gray-100); animation: fadeInUp 0.4s var(--ease-out) both; } .activity-item:last-child { border-bottom: none; } .activity-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .activity-avatar svg { width: 16px; height: 16px; color: var(--gray-500); } .activity-content { flex: 1; } .activity-text { font-size: 13.5px; color: var(--gray-700); } .activity-text strong { font-weight: 600; color: var(--gray-900); } .activity-time { font-size: 12px; color: var(--gray-400); margin-top: 2px; } /* ── Info Rows ── */ .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .info-item { } .info-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-400); margin-bottom: 4px; } .info-value { font-size: 14px; color: var(--gray-800); font-weight: 500; } /* ── Cost Summary Cards ── */ .cost-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .cost-card { background: var(--surface); border-radius: var(--radius-lg); padding: 20px; border: 1px solid rgba(229, 231, 235, 0.5); text-align: center; } .cost-card-value { font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1.2; } .cost-card-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-500); margin-top: 4px; } /* ── Payment Timeline ── */ .payment-timeline { padding: 0; } .payment-stage { display: flex; align-items: center; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--gray-100); position: relative; } .payment-stage:last-child { border-bottom: none; } .payment-marker { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; font-weight: 700; } .payment-marker.paid { background: var(--success); color: #fff; } .payment-marker.pending { background: var(--warning); color: #fff; } .payment-marker.upcoming { background: var(--gray-100); color: var(--gray-400); } .payment-info { flex: 1; min-width: 0; } .payment-title { font-weight: 600; color: var(--gray-900); font-size: 15px; } .payment-desc { font-size: 13px; color: var(--gray-500); margin-top: 4px; } .payment-amount { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--gray-900); text-align: right; flex-shrink: 0; min-width: 120px; } .payment-vat { font-size: 12px; color: var(--gray-400); text-align: right; margin-top: 2px; } /* ── Quick Actions ── */ .quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .quick-action { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; border: 1px dashed var(--gray-300); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.2s var(--ease-out); text-decoration: none; color: var(--gray-600); } .quick-action svg { width: 28px; height: 28px; } .quick-action span { font-size: 12.5px; font-weight: 600; text-align: center; } .quick-action:hover { border-color: var(--primary); border-style: solid; background: rgba(159, 140, 91, 0.04); color: var(--primary-deep); transform: translateY(-2px); } /* ── Profit/Loss Indicator ── */ .profit-positive { color: var(--success); font-weight: 600; } .profit-negative { color: var(--danger); font-weight: 600; } .profit-neutral { color: var(--gray-500); font-weight: 600; } /* ── Labour trade groups ── */ #labourContainer .svc-group { border-bottom: 1px solid var(--gray-100); } #labourContainer .svc-group:last-child { border-bottom: none; } #labourContainer .svc-group-items { max-height: 0; overflow: hidden; } #labourContainer .svc-group.open .svc-group-items { max-height: 5000px; overflow: visible; } #labourContainer .svc-group-items table { width: 100%; } #labourContainer .svc-group-items table th { text-align: left; } #labourContainer .svc-group-items table th.text-right { text-align: right; } #labourContainer .svc-group-items table td { vertical-align: middle; } .labour-header-right { display: flex; align-items: center; gap: 12px; pointer-events: none; } .labour-header-net { font-size: 14px; font-weight: 700; color: var(--gray-800); font-variant-numeric: tabular-nums; } .labour-table { width: 100%; border-collapse: collapse; } .labour-table th { padding: 6px 16px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-400); border-bottom: 1px solid var(--gray-100); text-align: left; } .labour-table td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--gray-200); vertical-align: middle; } .labour-table tbody tr:last-child td { border-bottom: none; } .labour-sub-name { font-weight: 600; color: var(--gray-800); font-size: 13px; line-height: 1.3; } .labour-sub-desc { font-size: 12px; color: var(--gray-400); margin-top: 1px; } .labour-extra-row { background: var(--gray-50); } .labour-extra-row .labour-sub-name { font-weight: 500; color: var(--gray-500); } .labour-actions-cell { width: 32px; text-align: center; } .labour-sub-table { width: 100%; border-collapse: collapse; } .labour-sub-table th { padding: 8px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-400); border-bottom: 1px solid var(--gray-100); text-align: left; } .labour-sub-table th.text-right, .labour-sub-table td.text-right { text-align: right !important; } .labour-sub-table td { padding: 10px 16px; font-size: 13px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; } .labour-sub-table tbody tr:last-child td { border-bottom: none; } .labour-sub-remove { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--gray-300); border-radius: var(--radius-sm); cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s; } .labour-sub-row:hover .labour-sub-remove { opacity: 1; } .labour-sub-remove:hover { color: var(--danger); } .labour-sub-remove-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--gray-300); border-radius: var(--radius-sm); cursor: pointer; transition: color 0.15s, background 0.15s; } .labour-sub-row:hover .labour-sub-remove-btn { color: var(--gray-400); } .labour-sub-remove-btn:hover { color: var(--danger); background: rgba(239, 68, 68, 0.06); } .labour-price-input { width: 100%; text-align: right; font-size: 13px; font-weight: 600; font-family: inherit; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--gray-800); transition: border-color 0.15s, background 0.15s; font-variant-numeric: tabular-nums; } .labour-price-input:hover { border-color: var(--gray-200); background: var(--gray-50); } .labour-price-input:focus { outline: none; border-color: var(--primary); background: white; box-shadow: 0 0 0 2px rgba(42, 133, 255, 0.12); } .labour-price-input::placeholder { color: var(--gray-300); font-weight: 400; } .labour-price-input.variance-positive { color: var(--success); } .labour-price-input.variance-negative { color: var(--danger); } .labour-price-input.variance-neutral { color: var(--gray-500); } .labour-add-area { padding: 10px 16px 14px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--gray-100); } .labour-sub-select-inline { font-size: 12px; padding: 5px 10px; border: 1px dashed var(--gray-300); border-radius: var(--radius-md); background: none; color: var(--primary); font-family: inherit; font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .labour-sub-select-inline:hover { border-color: var(--primary); background: rgba(42, 133, 255, 0.04); } .labour-sub-select-inline:focus { outline: none; border-color: var(--primary); border-style: solid; } /* ── Section Divider ── */ .section-divider { display: flex; align-items: center; gap: 12px; margin: 28px 0 20px; } .section-divider-text { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-400); white-space: nowrap; } .section-divider-line { flex: 1; height: 1px; background: var(--gray-200); } /* ── Sage Integration Card ── */ .integration-card { display: flex; align-items: center; gap: 20px; padding: 20px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); transition: all 0.2s; } .integration-card:hover { border-color: var(--primary-mild); box-shadow: var(--card-shadow); } .integration-logo { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; } .integration-info { flex: 1; } .integration-name { font-weight: 600; color: var(--gray-900); font-size: 15px; } .integration-desc { font-size: 13px; color: var(--gray-500); margin-top: 2px; } .integration-status { flex-shrink: 0; } /* ── Toggle Switch ── */ .toggle { position: relative; width: 44px; height: 24px; display: inline-block; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--gray-300); border-radius: 12px; cursor: pointer; transition: all 0.3s; } .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .toggle input:checked + .toggle-slider { background: var(--success); } .toggle input:checked + .toggle-slider::before { transform: translateX(20px); } /* ── Empty State ── */ .empty-state { text-align: center; padding: 48px 24px; } .empty-state svg { width: 48px; height: 48px; color: var(--gray-300); margin-bottom: 16px; } .empty-state h3 { font-family: var(--font-display); font-size: 20px; color: var(--gray-700); margin-bottom: 8px; } .empty-state p { font-size: 14px; color: var(--gray-500); max-width: 400px; margin: 0 auto 20px; } /* ── Scope Item ── */ .scope-list { list-style: none; padding-bottom: 8px; } .scope-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); } .scope-item:last-child { border-bottom: none; } .scope-bullet { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); margin-top: 7px; flex-shrink: 0; } .scope-text { font-size: 14px; color: var(--gray-700); line-height: 1.5; } /* ── Spec Section ── */ .spec-section { margin-bottom: 24px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; } .spec-section-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--gray-50); cursor: pointer; transition: background 0.2s; user-select: none; } .spec-section-header:hover { background: var(--gray-100); } .spec-section-left { display: flex; align-items: center; gap: 12px; } .spec-section-left svg { width: 18px; height: 18px; color: var(--gray-500); } .spec-section-title { font-size: 14px; font-weight: 600; color: var(--gray-800); } .spec-section-count { font-size: 12px; color: var(--gray-400); } .spec-section-arrow { width: 16px; height: 16px; color: var(--gray-400); transition: transform 0.25s var(--ease-out); } .spec-section.open .spec-section-arrow { transform: rotate(180deg); } .spec-section-body { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); } .spec-section.open .spec-section-body { max-height: 2000px; } .spec-section-content { padding: 16px 20px; } /* ── Inline Editable ── */ .inline-editable { padding: 4px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); transition: all 0.2s; cursor: text; } .inline-editable:hover { border-color: var(--gray-200); background: var(--gray-50); } .inline-editable:focus { border-color: var(--primary); background: var(--surface); outline: none; box-shadow: 0 0 0 3px rgba(160, 147, 112, 0.1); } /* ── Mobile Menu Toggle ── */ .menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--gray-200); background: var(--surface); border-radius: var(--radius-md); cursor: pointer; flex-shrink: 0; color: var(--gray-600); transition: all 0.2s; } .menu-toggle:hover { background: var(--gray-50); border-color: var(--gray-300); } .menu-toggle svg { width: 20px; height: 20px; } /* ── Sidebar Overlay ── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 99; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease-out); } .sidebar-overlay.active { opacity: 1; pointer-events: auto; } /* ── Table Scroll Wrapper ── */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Mobile table card view ── */ .mobile-cards { display: none; } .projects-mobile { display: none; } .mobile-card { padding: 16px; border-bottom: 1px solid var(--gray-100); } .mobile-card:last-child { border-bottom: none; } .mobile-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .mobile-card-title { font-weight: 600; color: var(--gray-900); font-size: 14px; } .mobile-card-title a { color: var(--gray-900); text-decoration: none; transition: color 0.2s; } .mobile-card-title a:hover { color: var(--primary); } .mobile-card-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .mobile-card-row { display: flex; flex-direction: column; gap: 2px; } .mobile-card-row.full-width { grid-column: 1 / -1; } .mobile-card-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-400); } .mobile-card-value { font-size: 13.5px; color: var(--gray-700); } .mobile-card-value.font-semibold { font-weight: 600; } /* ── Bottom Tab Bar ── */ .bottom-tab-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--surface); border-top: 1px solid var(--gray-200); padding: 4px 0 env(safe-area-inset-bottom, 0); justify-content: space-around; align-items: stretch; } .bottom-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; padding: 8px 4px 6px; min-height: 56px; text-decoration: none; color: var(--gray-400); background: none; border: none; font-family: inherit; cursor: pointer; transition: color 0.15s; -webkit-tap-highlight-color: transparent; } .bottom-tab svg { width: 20px; height: 20px; flex-shrink: 0; } .bottom-tab span { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .bottom-tab.active { color: var(--primary); } /* ── Bottom Sheet ── */ .bottom-sheet-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 250; opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease-out); } .bottom-sheet-overlay.active { opacity: 1; pointer-events: auto; } .bottom-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 12px 24px calc(24px + env(safe-area-inset-bottom, 0)); transform: translateY(100%); transition: transform 0.3s var(--ease-out); z-index: 251; } .bottom-sheet-overlay.active .bottom-sheet { transform: translateY(0); } .bottom-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--gray-300); margin: 0 auto 16px; } .bottom-sheet-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; color: var(--gray-700); text-decoration: none; font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--gray-100); min-height: 48px; } .bottom-sheet-item:last-child { border-bottom: none; } .bottom-sheet-item svg { width: 20px; height: 20px; color: var(--gray-500); flex-shrink: 0; } /* ── Dashboard Layout (Grid Areas) ── */ .dashboard-layout { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto; grid-template-areas: "stats stats" "pipeline pipeline" "projects actions" "projects activity" "profit profit"; gap: 24px; } .dashboard-stats { grid-area: stats; } .dashboard-pipeline { grid-area: pipeline; } .dashboard-projects { grid-area: projects; } .dashboard-actions { grid-area: actions; } .dashboard-activity { grid-area: activity; } .dashboard-profit { grid-area: profit; } /* ── Calendar ── */ .calendar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--gray-100); } .calendar-nav { display: flex; align-items: center; gap: 12px; } .calendar-nav-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray-200); background: var(--surface); border-radius: var(--radius-sm); cursor: pointer; color: var(--gray-600); transition: all 0.15s; } .calendar-nav-btn:hover { background: var(--gray-50); border-color: var(--gray-300); } .calendar-nav-btn svg { width: 18px; height: 18px; } .calendar-month-title { font-size: 18px; font-weight: 600; color: var(--gray-900); min-width: 180px; text-align: center; } .calendar-today-btn { padding: 6px 14px; border: 1px solid var(--gray-200); background: var(--surface); border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 500; color: var(--gray-600); cursor: pointer; transition: all 0.15s; } .calendar-today-btn:hover { background: var(--gray-50); border-color: var(--gray-300); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--gray-100); } .calendar-day-header { padding: 10px 4px; text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-400); border-bottom: 1px solid var(--gray-100); } .calendar-day { min-height: 90px; padding: 8px; border-right: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); cursor: pointer; transition: background 0.15s; position: relative; } .calendar-day:nth-child(7n) { border-right: none; } .calendar-day:hover { background: var(--gray-50); } .calendar-day.other-month { background: var(--gray-50); } .calendar-day.other-month .calendar-day-number { color: var(--gray-300); } .calendar-day.today .calendar-day-number { background: var(--primary); color: #ffffff; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } .calendar-day.selected { background: var(--primary-subtle); } .calendar-day-number { font-size: 13px; font-weight: 500; color: var(--gray-700); margin-bottom: 4px; } .calendar-day-events { display: flex; flex-direction: column; gap: 2px; } .calendar-event-pill { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .calendar-event-pill.type-meeting { background: var(--primary); color: #fff; } .calendar-event-pill.type-inspection { background: var(--blue); color: #fff; } .calendar-event-pill.type-delivery { background: var(--warning); color: #fff; } .calendar-event-pill.type-payment { background: var(--success); color: #fff; } .calendar-event-pill.type-deadline { background: var(--danger); color: #fff; } .calendar-event-dots { display: none; gap: 3px; margin-top: 4px; } .calendar-event-dot { width: 6px; height: 6px; border-radius: 50%; } /* Day detail panel */ .day-detail { padding: 20px; border-top: 2px solid var(--gray-100); } .day-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .day-detail-title { font-size: 16px; font-weight: 600; color: var(--gray-900); } .day-detail-empty { text-align: center; padding: 32px 16px; color: var(--gray-400); font-size: 14px; } .event-card { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--gray-100); border-radius: var(--radius-md); margin-bottom: 10px; transition: border-color 0.15s; } .event-card:hover { border-color: var(--gray-200); } .event-card:last-child { margin-bottom: 0; } .event-time-col { flex-shrink: 0; min-width: 50px; text-align: center; } .event-time { font-size: 14px; font-weight: 600; color: var(--gray-900); } .event-time-period { font-size: 10px; color: var(--gray-400); text-transform: uppercase; } .event-details { flex: 1; min-width: 0; } .event-title { font-size: 14px; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; } .event-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .event-type-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); } .event-type-badge.type-meeting { background: var(--primary); color: #fff; } .event-type-badge.type-inspection { background: var(--blue); color: #fff; } .event-type-badge.type-delivery { background: var(--warning); color: #fff; } .event-type-badge.type-payment { background: var(--success); color: #fff; } .event-type-badge.type-deadline { background: var(--danger); color: #fff; } .event-project-link { font-size: 12px; color: var(--gray-500); } .event-project-link a { color: var(--primary); text-decoration: none; } .event-maps-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--primary); text-decoration: none; padding: 4px 10px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); transition: all 0.2s; } .event-maps-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .event-maps-link svg { flex-shrink: 0; } /* ── Mobile Search ── */ .mobile-search { display: none; padding: 12px 16px; border-bottom: 1px solid var(--gray-100); } .mobile-search-input { width: 100%; padding: 10px 14px 10px 40px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); font-family: inherit; font-size: 14px; background: var(--gray-50); outline: none; transition: border-color 0.2s; } .mobile-search-input:focus { border-color: var(--primary); background: var(--surface); } .mobile-search-wrap { position: relative; } .mobile-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--gray-400); } /* ── Responsive ── */ /* Tablet landscape */ @media (max-width: 1200px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .cost-summary { grid-template-columns: repeat(2, 1fr); } .grid-2, .grid-1-2, .grid-2-1 { grid-template-columns: 1fr; } } /* Tablet portrait */ @media (max-width: 1024px) { .sidebar { transform: translateX(-100%); width: 264px; } .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); } .sidebar.open .nav-item span { opacity: 1; width: auto; } .sidebar.open .nav-item { justify-content: flex-start; padding: 11px 14px; width: auto; margin: 0; } .sidebar.open .sidebar-header { justify-content: flex-start; padding: 16px 20px; } .sidebar.open .sidebar-header img { width: 160px !important; } .sidebar-collapse-btn { display: none; } .main-content { margin-left: 0 !important; } .menu-toggle { display: flex; } .sidebar-overlay { display: block; } .header { padding: 0 24px; } .page-content { padding: 24px; } .header-search { width: 220px; } .card-body-flush { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Mobile */ @media (max-width: 768px) { /* Bottom tab bar */ .bottom-tab-bar { display: flex; } .menu-toggle { display: none !important; } .page-content { padding-bottom: 80px; } /* Make week-view grid horizontally scrollable so all 7 days are reachable */ #calViewWeek { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cal-week-grid { min-width: 700px; } /* Header */ .header { padding: 0 16px; min-height: 60px; gap: 8px; } .header-left { gap: 10px; } .header-title { font-size: 18px; } .header-search { display: none; } .header-right { gap: 8px; } /* Page */ .page-content { padding: 16px; padding-bottom: 80px; } .mb-6 { margin-bottom: 16px; } /* Dashboard layout — reorder for mobile */ .dashboard-layout { grid-template-columns: 1fr; grid-template-areas: "actions" "stats" "projects" "pipeline" "activity"; gap: 16px; overflow: hidden; } .dashboard-layout > * { min-width: 0; } .dashboard-profit { display: none; } .dashboard-actions { display: none; } .dashboard-pipeline { display: none; } .dashboard-activity { display: none; } /* Stats grid — 2 cols, compact (override inline grid-template-columns set on certain pages) */ .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; margin-bottom: 0; } .stat-card { padding: 16px; border-radius: var(--radius-lg); } .stat-card-icon { display: none; } .stat-value { font-size: 26px; margin-bottom: 2px; } .stat-label { font-size: 10px; } /* Card headers — stack title + stats */ .card-header { flex-wrap: wrap; gap: 10px; padding: 14px 16px; } .card-title { font-size: 16px; } .header-stats { order: 3; width: 100%; justify-content: space-between; gap: 4px; padding-top: 10px; border-top: 1px solid var(--gray-100); } .header-stat-value { font-size: 18px; } .header-stat-label { font-size: 8px; } .card-header-right { margin-left: auto; } .card-body { padding: 16px; } /* Pipeline — horizontal scroll, single row */ .pipeline { padding: 12px 16px; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .pipeline-stage { flex: 0 0 auto; min-width: 80px; padding: 10px 12px; } .pipeline-stage::after { display: block; height: 40%; top: 30%; } .pipeline-stage:last-child::after { display: none; } .pipeline-count { font-size: 22px; } .pipeline-label { font-size: 9px; } .pipeline-dot { width: 10px; height: 10px; margin-bottom: 6px; } /* Quick Actions — prominent on mobile */ .quick-actions { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; } .quick-action { padding: 16px 8px; border-style: solid; border-color: var(--gray-200); background: var(--surface); } .quick-action svg { width: 24px; height: 24px; } .quick-action span { font-size: 12px; } /* Activity */ .activity-item { padding: 12px 0; gap: 12px; } .activity-avatar { width: 30px; height: 30px; } .activity-avatar svg { width: 14px; height: 14px; } .activity-text { font-size: 13px; } .activity-time { font-size: 11px; } /* Forms */ .form-row, .form-row-3, .form-row-4 { grid-template-columns: 1fr; } /* Modals — slide up from bottom */ .modal-overlay { align-items: flex-end; } .modal { width: 100%; max-width: 100%; min-height: 50vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; margin: 0; } .modal-header { padding: 16px; } .modal-body { padding: 16px; overflow-y: auto; } .modal-footer { padding: 12px 16px; flex-wrap: wrap; } .modal-footer .btn { min-height: 44px; } .est-footer-status-actions .btn { min-height: 44px; } /* Login */ .login-brand { display: none; } .login-form-panel { padding: 24px; } .login-mobile-logo { display: block !important; width: 180px; height: auto; margin: 0 auto 32px; } /* Buttons — touch targets */ .btn { min-height: 44px; } .card-header .btn { padding: 6px 10px; font-size: 11px; min-height: unset; } .card-header .btn svg { width: 14px; height: 14px; } /* Fullscreen button */ .fullscreen-btn { width: 28px; height: 28px; } .fullscreen-btn svg { width: 14px; height: 14px; } /* Cost summary */ .cost-summary { grid-template-columns: repeat(2, 1fr); gap: 10px; } .cost-card { padding: 14px; } .cost-card-value { font-size: 20px; } /* Info grid */ .info-grid { grid-template-columns: 1fr; gap: 12px; } /* Payment timeline */ .payment-stage { gap: 12px; padding: 14px 0; } .payment-marker { width: 34px; height: 34px; font-size: 12px; } .payment-amount { font-size: 18px; } /* User avatar */ .user-avatar { width: 34px; height: 34px; font-size: 12px; } .header-icon-btn { width: 40px; height: 40px; } .header-icon-btn svg { width: 16px; height: 16px; } /* Calendar — compact for mobile */ .calendar-day { min-height: 48px; padding: 4px; } .calendar-day-number { font-size: 12px; } .calendar-day-events { display: none; } .calendar-event-dots { display: flex; } .calendar-month-title { font-size: 16px; min-width: 140px; } .calendar-nav-btn { width: 40px; height: 40px; } .calendar-header { padding: 12px 16px; } .day-detail { padding: 16px; } .event-card { padding: 12px; gap: 10px; } /* Mobile search */ .mobile-search { display: block; } } /* Table to card switch — below tablet */ @media (max-width: 640px) { .card-body-flush:has(.mobile-cards) > table { display: none; } .card-body-flush .mobile-cards { display: block; } /* Projects page — keep stats visible, swap register table for mobile cards */ .projects-register { display: none; } .projects-mobile { display: block; } } .mobile-empty-state { text-align: center; padding: 32px 16px; color: var(--gray-500); font-size: 13px; } /* Small mobile */ @media (max-width: 380px) { .page-content { padding: 12px; } .stats-grid { gap: 8px; } .stat-card { padding: 12px; } .stat-value { font-size: 22px; } .stat-label { font-size: 9px; } .header-title { font-size: 16px; } .pipeline-stage { min-width: 68px; padding: 10px 8px; } .pipeline-count { font-size: 20px; } } /* ── Login Page ── */ .login-container { display: flex; min-height: 100vh; } .login-brand { width: 46%; background: var(--sidebar-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; } .login-logo { width: 260px; margin-bottom: 32px; } .login-divider { width: 60px; height: 1px; background: var(--primary); margin-bottom: 24px; } .login-tagline { font-family: var(--font-display); font-size: 22px; color: var(--primary-mild); font-style: italic; } .login-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px; background: var(--gray-50); } .login-form { width: 100%; max-width: 400px; } .login-mobile-logo { display: none; } .login-form h2 { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--gray-900); margin-bottom: 8px; } .login-form p { color: var(--gray-500); margin-bottom: 32px; } .login-field { position: relative; margin-bottom: 18px; } .login-field svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gray-400); } .login-field input { width: 100%; padding: 13px 16px 13px 48px; border: 1px solid var(--gray-300); border-radius: var(--radius-md); font-family: inherit; font-size: 14px; background: var(--surface); transition: all 0.2s; outline: none; } .login-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(159, 140, 91, 0.1); } .login-btn { width: 100%; padding: 14px; background: var(--primary); color: #ffffff; font-family: inherit; font-size: 15px; font-weight: 600; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; margin-top: 8px; } .login-btn:hover { background: var(--primary-deep); } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } /* ── Utilities ── */ .text-primary { color: var(--primary) !important; } .text-success { color: var(--success) !important; } .text-warning { color: var(--warning) !important; } .text-danger { color: var(--danger) !important; } .text-blue { color: var(--blue) !important; } .text-purple { color: var(--purple) !important; } .text-muted { color: var(--gray-400) !important; } .text-secondary { color: var(--gray-500) !important; } .text-body { color: var(--gray-700) !important; } .text-heading { color: var(--gray-900) !important; } .text-right { text-align: right; } .text-center { text-align: center; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-light { font-weight: 300; } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .inline-flex { display: inline-flex; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .w-full { width: 100%; } .w-auto { width: auto; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .p-0 { padding: 0; } .pb-0 { padding-bottom: 0; } .hidden { display: none; } .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; } /* Stat value colour modifiers */ .stat-value.text-success { color: var(--success) !important; } .stat-value.text-warning { color: var(--warning) !important; } .stat-value.text-danger { color: var(--danger) !important; } .stat-value.text-blue { color: var(--blue) !important; } .stat-value.text-primary { color: var(--primary) !important; } /* Badge size modifier */ .badge-lg { padding: 6px 14px; font-size: 13px; } /* Header stat value colour modifiers */ .header-stat-value.text-success { color: var(--success) !important; } .header-stat-value.text-warning { color: var(--warning) !important; } .header-stat-value.text-danger { color: var(--danger) !important; } .header-stat-value.text-blue { color: var(--blue) !important; } .header-stat-value.text-muted { color: var(--gray-400) !important; } /* Cost card value colour modifiers */ .cost-card-value.text-success { color: var(--success) !important; } .cost-card-value.text-danger { color: var(--danger) !important; } .cost-card-value.text-blue { color: var(--blue) !important; } .cost-card-value.text-warning { color: var(--warning) !important; } /* Absence dot colour classes */ .hr-absence-dot.dot-success { background: var(--success); } .hr-absence-dot.dot-danger { background: var(--danger); } .hr-absence-dot.dot-purple { background: var(--purple); } .hr-absence-dot.dot-warning { background: var(--warning); } .hr-absence-dot.dot-blue { background: var(--blue); } /* Integration logo colour classes */ .integration-logo.logo-sage { background: #00854a; color: #fff; } .integration-logo.logo-quickbooks { background: #2ca01c; color: #fff; } /* Focus-visible states for accessibility */ .btn:focus-visible, .nav-item:focus-visible, .form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible, .tab-btn:focus-visible, .project-nav-item:focus-visible, .header-icon-btn:focus-visible, .modal-close:focus-visible, .toggle input:focus-visible + .toggle-slider, .calendar-day:focus-visible, .quick-action:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Calendar filter avatar border colour classes */ .cal-filter-avatar.border-primary { border-color: var(--primary); } .cal-filter-avatar.border-purple { border-color: var(--purple); } /* ── Project Inner Layout (dual sidebar) ── */ .project-inner-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } .project-sidebar { background: #fff; border-right: 1px solid var(--gray-200); padding: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; } .project-sidebar-header { padding: 24px 20px 16px; border-bottom: 1px solid var(--gray-100); } .project-sidebar-title { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--gray-900); margin-bottom: 2px; } .project-sidebar-subtitle { font-size: 12px; color: var(--gray-500); } .project-sidebar-nav { padding: 8px 0; } .project-nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 20px; font-size: 13.5px; font-weight: 500; color: var(--gray-500); background: none; border: none; cursor: pointer; text-align: left; transition: all 0.15s ease; font-family: inherit; border-radius: 6px; margin: 1px 10px; width: calc(100% - 20px); } .project-nav-item:hover { color: var(--gray-700); background: var(--gray-100); } .project-nav-item.active { color: var(--primary); background: rgba(159, 140, 91, 0.08); font-weight: 600; } .project-nav-item svg { flex-shrink: 0; } .project-content-area { padding: 0 0 60px; min-width: 0; overflow-y: auto; } .project-header { display: flex; align-items: center; justify-content: space-between; padding: 0 32px; min-height: var(--header-height); background: #f3f4f6; border-bottom: 1px solid rgba(229, 231, 235, 0.6); margin-bottom: 24px; position: sticky; top: 0; z-index: 50; } .project-content-area > *:not(.project-header) { margin-left: 32px; margin-right: 32px; } .project-content-area > .cost-summary { margin-top: 28px; } .project-section { display: none; } .project-section.active { display: block; } /* ── Finish Panes ── */ .finish-pane { display: none; } .finish-pane.active { display: block; } /* ── Sage Collapsible Sections ── */ .sage-chevron { transition: transform 0.2s; color: var(--gray-400); display: none; } .sage-collapsed .sage-body { display: none; } .sage-collapsed .sage-chevron { transform: rotate(-90deg); } /* Desktop: hide chevron, always show body */ .sage-section .sage-chevron { display: none; } /* Mobile P&L cards hidden by default */ .pl-mobile-cards { display: none !important; } @media (max-width: 640px) { /* Show sage chevron and collapse by default on mobile */ .sage-section .sage-chevron { display: block; } .sage-section { } .sage-section.sage-collapsed .sage-body { display: none; } /* Show mobile P&L cards, hide table */ .pl-mobile-cards { display: block !important; } } /* ── P&L Expandable Rows ── */ .pl-row { cursor: pointer; transition: background 0.15s; } .pl-row:hover { background: var(--gray-50); } .pl-row.expanded { background: var(--gray-50); } .pl-chevron { display: inline-block; vertical-align: middle; margin-right: 4px; transition: transform 0.2s; color: var(--gray-400); } .pl-row.expanded .pl-chevron { transform: rotate(90deg); color: var(--primary); } .pl-detail { display: none; } .pl-detail.open { display: table-row; } .pl-detail > td { padding: 0 20px 20px !important; background: var(--gray-50); } .pl-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .pl-detail-section h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); margin-bottom: 10px; } .pl-detail-table { width: 100%; font-size: 13px; } .pl-detail-table td { padding: 6px 0 !important; border: none !important; color: var(--gray-600); } .pl-detail-table .text-right { text-align: right; } .pl-detail-total td { padding-top: 10px !important; border-top: 1px solid var(--gray-200) !important; font-weight: 700; color: var(--gray-900); } .pl-detail-profit td { font-weight: 700; color: var(--success); } .pl-detail-summary { background: var(--surface); border-radius: var(--radius-lg); padding: 16px; } .tab-add-btn { color: var(--primary) !important; opacity: 0.6; transition: opacity 0.15s; } .tab-add-btn:hover { opacity: 1; } /* ── Image Gallery ── */ .finish-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; min-height: 120px; } .finish-gallery-placeholder { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; border: 2px dashed var(--gray-200); border-radius: var(--radius-lg); color: var(--gray-400); font-size: 13px; text-align: center; cursor: pointer; transition: all 0.2s; } .finish-gallery-placeholder:hover, .finish-gallery.drag-over .finish-gallery-placeholder { border-color: var(--primary); color: var(--primary); } .finish-gallery.drag-over { outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: var(--radius-lg); } .finish-gallery-item { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; background: var(--gray-100); cursor: pointer; } .finish-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .finish-gallery-item .gallery-remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; } .finish-gallery-item:hover .gallery-remove { opacity: 1; } .finish-gallery-item .gallery-remove svg { width: 12px; height: 12px; } .gallery-annotation { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.95); padding: 4px 6px; font-size: 11px; } @media (max-width: 768px) { .finish-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .finish-gallery-placeholder { padding: 20px; } } /* ── Section & Item CRUD Controls ── */ .section-actions { display: flex; gap: 4px; margin-left: auto; opacity: 0; transition: opacity 0.15s; } .spec-section-header:hover .section-actions { opacity: 1; } .section-action-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--gray-400); transition: all 0.15s; } .section-action-btn:hover { background: var(--gray-100); color: var(--gray-700); } .section-action-btn.delete:hover { background: var(--danger-subtle); color: var(--danger); } .section-action-btn svg { width: 14px; height: 14px; } /* Item hover actions */ .scope-item { position: relative; } .scope-item .item-actions { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; } .scope-item:hover .item-actions { opacity: 1; } .item-action-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: var(--surface); border-radius: var(--radius-sm); cursor: pointer; color: var(--gray-400); box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: all 0.15s; } .item-action-btn:hover { color: var(--gray-700); background: var(--gray-50); } .item-action-btn.delete:hover { color: var(--danger); background: var(--danger-subtle); } .item-action-btn svg { width: 12px; height: 12px; } /* Add item button at bottom of section */ .add-item-inline { display: flex; align-items: center; gap: 8px; padding: 10px 0; font-size: 13px; font-weight: 500; color: var(--primary); background: none; border: none; cursor: pointer; font-family: inherit; transition: color 0.15s; margin-top: 4px; } .add-item-inline:hover { color: var(--primary-deep); } .add-item-inline svg { width: 14px; height: 14px; } /* Inline edit input */ .inline-edit-input { flex: 1; border: 1px solid var(--primary); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 13.5px; font-family: inherit; color: var(--gray-900); outline: none; background: var(--surface); box-shadow: 0 0 0 3px rgba(159, 140, 91, 0.1); } .scope-item.editing { padding-right: 0; } .scope-item.editing .item-actions { display: none; } select.inline-edit-input { appearance: auto; border: 1px solid var(--primary); border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; color: var(--gray-900); background: var(--surface); box-shadow: 0 0 0 3px rgba(159, 140, 91, 0.1); outline: none; cursor: pointer; } /* Table row hover actions */ tr .row-actions { opacity: 0; transition: opacity 0.15s; white-space: nowrap; } tr:hover .row-actions { opacity: 1; } .row-actions { display: flex; gap: 4px; justify-content: flex-end; } /* Mobile: collapse inner sidebar to horizontal scroll */ @media (max-width: 1024px) { .project-inner-layout { grid-template-columns: 1fr; min-height: 0; } .project-sidebar { position: relative; top: auto; height: auto; border-right: none; border-bottom: 1px solid var(--gray-100); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .project-sidebar-header { display: none; } .project-sidebar-nav { display: flex; padding: 0; gap: 0; flex-wrap: nowrap; } .project-nav-item { flex: 0 0 auto; white-space: nowrap; padding: 12px 16px; font-size: 12px; border-bottom: 2px solid transparent; border-radius: 0; margin: 0; width: auto; gap: 6px; } .project-nav-item.active { border-bottom-color: var(--primary); background: none; } .project-nav-item svg { width: 14px; height: 14px; } .project-content-area { padding: 16px; } } @media (max-width: 768px) { .project-content-area { padding-bottom: 80px; } .project-nav-item svg { display: none; } .project-nav-item { padding: 10px 12px; font-size: 11px; } .project-header { padding: 0 16px; min-height: 56px; gap: 8px; } .project-header .header-breadcrumb { display: none; } .project-header .header-title { font-size: 16px; } .project-header .header-right .badge { display: none; } .project-content-area > *:not(.project-header) { margin-left: 16px; margin-right: 16px; } .project-content-area > .cost-summary { margin-top: 16px; } } /* ── Login Mobile (must come after base login styles) ── */ @media (max-width: 768px) { .login-brand { display: none !important; } .login-form-panel { padding: 24px; } .login-form h2 { font-size: 24px; } } /* ── Expand Button ── */ .btn-icon-only { background: none; border: none; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); color: var(--gray-400); display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s; vertical-align: middle; } .btn-icon-only:hover { color: var(--gray-600); } /* ── Project Detail Mobile ── */ @media (max-width: 768px) { .header-breadcrumb { display: none; } .header-right .badge { display: none; } .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .tabs .tab, .tabs .tab-btn { flex: 0 0 auto; white-space: nowrap; font-size: 12px; padding: 10px 12px; } } /* ═══════════════════════════════════════════════════════ Calendar — Sidebar + Day/Week/Month Layout ═══════════════════════════════════════════════════════ */ /* Layout */ .cal-layout { display: flex; gap: 24px; min-height: calc(100vh - 180px); } .cal-sidebar { width: 280px; flex-shrink: 0; background: var(--surface); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--card-shadow); height: fit-content; position: sticky; top: 24px; } .cal-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } /* Sync Status */ .cal-sync-status { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--success); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); } .cal-sync-time { color: var(--gray-400); font-weight: 400; margin-left: auto; } /* Mini Calendar */ .cal-mini { margin-bottom: 28px; } .cal-mini-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .cal-mini-title { font-weight: 600; font-size: 13px; color: var(--gray-800); letter-spacing: 0.03em; } .cal-mini-nav { background: none; border: none; cursor: pointer; padding: 4px; color: var(--gray-500); border-radius: var(--radius-sm); transition: color 0.2s; } .cal-mini-nav:hover { color: var(--gray-800); } .cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 11px; } .cal-mini-day-header { color: var(--gray-400); font-weight: 500; padding: 4px; } .cal-mini-day { padding: 6px; border-radius: 50%; cursor: pointer; color: var(--gray-800); font-weight: 400; transition: all 0.15s; } .cal-mini-day:hover { background: var(--gray-100); } .cal-mini-day.today { background: var(--primary); color: #fff; font-weight: 600; } .cal-mini-day.selected { background: var(--primary-subtle); color: var(--primary); font-weight: 600; } .cal-mini-day.today.selected { background: var(--primary); color: #fff; } .cal-mini-day.outside { color: var(--gray-300); } .cal-mini-day.has-events::after { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); margin: 1px auto 0; } .cal-mini-day.today.has-events::after { background: #fff; } /* Filter Section */ .cal-filter-section { margin-bottom: 20px; } .cal-filter-title { font-weight: 600; font-size: 13px; color: var(--gray-800); margin-bottom: 14px; } .cal-filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; font-size: 13px; color: var(--gray-700); } .cal-filter-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); flex-shrink: 0; } .cal-filter-list { margin-top: 14px; } .cal-filter-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--gray-600); background: var(--gray-100); border: 2.5px solid; flex-shrink: 0; } /* Event Type Key */ .cal-type-key { display: flex; flex-direction: column; gap: 8px; } .cal-type-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-600); } .cal-type-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } /* Toolbar */ .cal-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--gray-200); } .cal-toolbar-left { display: flex; align-items: center; gap: 8px; } .cal-toolbar-title { font-size: 16px; font-weight: 500; color: var(--gray-800); margin-left: 4px; } .cal-nav-btn { background: none; border: none; cursor: pointer; padding: 6px; color: var(--gray-500); border-radius: var(--radius-sm); transition: all 0.15s; } .cal-nav-btn:hover { color: var(--gray-800); background: var(--gray-100); } .cal-toolbar-right { display: flex; gap: 4px; } .cal-view-btn { padding: 7px 16px; border: none; background: var(--gray-100); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--gray-500); border-radius: 50px; letter-spacing: 0.03em; transition: all 0.2s; font-family: var(--font-body); } .cal-view-btn:hover { color: var(--gray-700); } .cal-view-btn.active { background: var(--primary); color: #fff; } /* View Panes */ .cal-view-pane { display: none; flex: 1; overflow: auto; } .cal-view-pane.active { display: block; } /* Day View */ .cal-day-header-bar { background: var(--gray-50); padding: 14px 24px; border-bottom: 1px solid var(--gray-200); } .cal-day-label { font-size: 13px; color: var(--gray-400); margin-bottom: 2px; } .cal-day-num { font-size: 28px; font-weight: 300; color: var(--gray-800); } .cal-timeslots { padding: 0; } .cal-timeslot:hover { background: var(--gray-50); } .cal-timeslot { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 10px 24px; border-bottom: 1px solid var(--gray-100); min-height: 56px; align-items: start; } .cal-timeslot-time { font-size: 12px; color: var(--gray-400); padding-top: 4px; text-align: right; padding-right: 12px; } .cal-timeslot-events { position: relative; } /* Event Cards */ .cal-event-card { border-radius: var(--radius-md); padding: 10px 14px 12px; cursor: pointer; margin-bottom: 4px; position: relative; transition: transform 0.15s, box-shadow 0.15s; overflow: hidden; } .cal-event-card:hover { transform: scale(1.015); box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 5; } .cal-event-card .cal-event-title { font-weight: 500; font-size: 13px; margin-bottom: 2px; padding-right: 36px; } .cal-event-card .cal-event-meta { font-size: 11px; opacity: 0.7; } .cal-event-card .cal-event-avatar { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; background: rgba(0,0,0,0.08); color: inherit; } .cal-event-location { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: inherit; opacity: 0.7; text-decoration: none; margin-top: 3px; transition: opacity 0.15s; } .cal-event-location:hover { opacity: 1; text-decoration: underline; } .cal-event-card.type-meeting { background: var(--primary); color: #fff; } .cal-event-card.type-inspection { background: var(--blue); color: #fff; } .cal-event-card.type-delivery { background: var(--warning); color: #fff; } .cal-event-card.type-payment { background: var(--success); color: #fff; } .cal-event-card.type-deadline { background: var(--danger); color: #fff; } /* Week View */ .cal-week-grid { display: grid; grid-template-columns: 80px repeat(7, 1fr); min-height: 500px; } .cal-week-header { padding: 10px 6px; text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); border-bottom: 1px solid var(--gray-200); background: var(--gray-50); } .cal-week-header.today { color: var(--primary); } .cal-week-header .cal-week-day-num { display: block; font-size: 18px; font-weight: 300; color: var(--gray-700); margin-top: 2px; } .cal-week-header.today .cal-week-day-num { color: var(--primary); font-weight: 500; } .cal-week-time { font-size: 11px; color: var(--gray-400); text-align: right; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--gray-100); } .cal-week-cell { border-right: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); padding: 2px; min-height: 48px; position: relative; } .cal-week-cell:last-child { border-right: none; } .cal-week-cell:hover { background: var(--gray-50); } .cal-week-event { font-size: 10px; padding: 3px 5px; border-radius: 4px; font-weight: 500; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } /* Calendar page responsive */ @media (max-width: 1024px) { .cal-layout { flex-direction: column; } .cal-sidebar { width: 100%; position: static; } } @media (max-width: 768px) { .cal-toolbar { flex-direction: column; gap: 12px; align-items: flex-start; } .cal-timeslot { grid-template-columns: 60px 1fr; padding: 8px 16px; } } /* ── Payment Schedule Cards ── */ .pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; } .pay-card { padding: 24px; border-right: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); } .pay-card:last-child { border-right: none; } .pay-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; } .pay-card-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-400); margin-bottom: 4px; } .pay-card-title { font-size: 15px; font-weight: 600; color: var(--gray-800); } .pay-card-pct { font-weight: 400; color: var(--gray-400); font-size: 13px; } .pay-card-amount { font-size: 28px; font-weight: 300; color: var(--gray-900); margin-bottom: 4px; letter-spacing: -0.02em; } .pay-card-vat { font-size: 12px; color: var(--gray-400); margin-bottom: 12px; } .pay-card-date { font-size: 13px; color: var(--gray-500); margin-bottom: 16px; } .pay-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--gray-100); } .pay-card-ref { font-size: 12px; font-weight: 600; color: var(--gray-400); letter-spacing: 0.03em; } .pay-card-actions { display: flex; align-items: center; gap: 8px; } .pay-card.pay-paid { background: var(--surface); } .pay-card.pay-due { background: var(--warning-subtle); } .pay-card.pay-overdue { background: var(--danger-subtle); } .pay-card.pay-upcoming { background: var(--gray-50); } @media (max-width: 768px) { .pay-grid { grid-template-columns: 1fr; } .pay-card { border-right: none; } .pay-card-amount { font-size: 24px; } } /* ── Estimates Mobile ── */ @media (max-width: 640px) { .estimates-pipeline { display: none; } } /* ═══════════════════════════════════════════════════════ HR Section ═══════════════════════════════════════════════════════ */ /* HR Layout: sidebar + main content */ .hr-layout { display: flex; gap: 24px; align-items: flex-start; } /* HR Left Sidebar */ .hr-sidebar { width: 280px; min-width: 280px; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); padding: 8px; position: sticky; top: 88px; } .hr-sidebar-nav { display: flex; flex-direction: column; gap: 2px; } .hr-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; color: var(--gray-600); text-decoration: none; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hr-sidebar-item:hover { background: var(--gray-50); color: var(--gray-800); } .hr-sidebar-item.active { background: var(--primary); color: #fff; } .hr-sidebar-item svg { flex-shrink: 0; width: 18px; height: 18px; } .hr-sidebar-divider { height: 1px; background: var(--gray-200); margin: 8px 0; } .hr-sidebar-sub-item { padding-left: 22px; font-size: 12px; } .hr-sidebar-sub-item span { overflow: hidden; text-overflow: ellipsis; } /* HR Main Content */ .hr-main { flex: 1; min-width: 0; } /* HR Tab Panes */ .hr-tab-pane { display: none; } .hr-tab-pane.active { display: block; } /* HR View Toggles (calendar) */ .hr-view-toggles { display: flex; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; } .hr-view-toggle { padding: 6px 12px; border: none; background: var(--surface); font-size: 11px; font-weight: 600; color: var(--gray-500); cursor: pointer; transition: all 0.15s; font-family: var(--font-body); letter-spacing: 0.02em; border-right: 1px solid var(--gray-200); } .hr-view-toggle:last-child { border-right: none; } .hr-view-toggle:hover { background: var(--gray-50); color: var(--gray-700); } .hr-view-toggle.active { background: var(--primary); color: #fff; } /* Employee Card Grid */ .hr-employee-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .hr-emp-card { background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; cursor: pointer; transition: all 0.2s var(--ease-out); position: relative; } .hr-emp-card:hover { border-color: var(--primary-mild); box-shadow: var(--card-shadow-hover); transform: translateY(-2px); } .hr-emp-avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; color: #fff; margin: 0 auto 14px; } .hr-emp-name { font-size: 15px; font-weight: 600; color: var(--gray-800); margin-bottom: 2px; } .hr-emp-role { font-size: 13px; color: var(--gray-500); margin-bottom: 6px; } .hr-emp-email { font-size: 12px; color: var(--gray-400); } .hr-emp-menu { position: absolute; top: 12px; right: 12px; background: none; border: none; cursor: pointer; color: var(--gray-400); padding: 4px; border-radius: var(--radius-sm); transition: color 0.2s; } .hr-emp-menu:hover { color: var(--gray-600); } .hr-emp-status { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 20px; } /* HR Calendar */ .hr-calendar { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--gray-200); } .hr-cal-header { padding: 10px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); text-align: center; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); } .hr-cal-day { min-height: 100px; padding: 8px; border-right: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); position: relative; } .hr-cal-day:nth-child(7n) { border-right: none; } .hr-cal-day.outside { background: var(--gray-50); } .hr-cal-day.today .hr-cal-num { background: var(--primary); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; } .hr-cal-num { font-size: 13px; font-weight: 500; color: var(--gray-700); margin-bottom: 4px; } .hr-cal-day.outside .hr-cal-num { color: var(--gray-300); } .hr-cal-event { font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; font-weight: 500; } .hr-cal-event.holiday { background: var(--success); } .hr-cal-event.sickness { background: var(--danger); } .hr-cal-event.other { background: var(--purple); } .hr-cal-event.bank-holiday { background: var(--warning); color: #fff; } .hr-cal-event.training { background: var(--blue); } /* HR Absence Types */ .hr-absence-type-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); font-size: 14px; color: var(--gray-700); } .hr-absence-type-row:last-child { border-bottom: none; } .hr-absence-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* Employee Detail Sections */ .hr-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .hr-detail-item label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-400); margin-bottom: 4px; } .hr-detail-item span { font-size: 14px; color: var(--gray-800); } /* Absence History Table */ .hr-absence-table { width: 100%; border-collapse: collapse; } .hr-absence-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-400); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--gray-200); } .hr-absence-table td { padding: 10px 12px; font-size: 13px; color: var(--gray-700); border-bottom: 1px solid var(--gray-100); } .hr-absence-summary { display: flex; gap: 20px; padding: 12px 0; font-size: 13px; color: var(--gray-500); } .hr-absence-summary strong { color: var(--gray-700); } @media (max-width: 900px) { .hr-layout { flex-direction: column; } .hr-sidebar { width: 100%; min-width: 0; position: static; } .hr-sidebar-nav { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; } .hr-sidebar-item { white-space: nowrap; flex: 0 0 auto; } .hr-sidebar-employee-sub { display: none !important; } .hr-view-toggles { display: none; } } @media (max-width: 768px) { .hr-employee-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .hr-cal-day { min-height: 60px; padding: 4px; } .hr-cal-event { font-size: 9px; padding: 1px 4px; } .hr-detail-grid { grid-template-columns: 1fr; } .hr-toolbar { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; } .hr-toolbar .hr-search { width: 100%; margin: 0; } } .hr-page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .hr-toolbar { display: flex; gap: 8px; align-items: center; } .hr-toolbar .hr-search { width: 240px; margin: 0; } @media (max-width: 768px) { .hr-page-header { flex-direction: column; align-items: stretch; } .hr-page-header > div:first-child { width: 100%; } } /* Schedule of Works - Phased Structure */ .sow-table { width: 100%; table-layout: auto; border-collapse: collapse; } .sow-table thead th { background: var(--gray-50); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); font-weight: 600; padding: 12px 10px; border-bottom: 1px solid var(--gray-200); white-space: nowrap; text-align: left; } .sow-table thead th.text-right { text-align: right; } .sow-table tbody td { padding: 16px 10px; font-size: 13px; color: var(--gray-700); border-bottom: 1px solid var(--gray-100); vertical-align: middle; } .sow-table .sow-phase-row { transition: background 0.15s ease; cursor: pointer; } .sow-table .sow-phase-row:hover { background: var(--gray-50); } .sow-table .sow-phase-row.sow-phase-open { background: var(--primary-subtle); } .sow-table .sow-chevron { transition: transform 0.2s ease; color: var(--gray-400); display: block; } .sow-table .sow-phase-open .sow-chevron { transform: rotate(90deg); color: var(--primary); } /* Column-specific styling via nth-child for the SOW phase rows */ .sow-table thead th:nth-child(1), .sow-table tbody .sow-phase-row td:nth-child(1) { width: 36px; padding: 14px 0 14px 16px; } .sow-table thead th:nth-child(2), .sow-table tbody .sow-phase-row td:nth-child(2) { width: 28px; text-align: center; color: var(--gray-400); font-size: 12px; font-weight: 500; padding-left: 4px; padding-right: 4px; } .sow-table thead th:nth-child(3), .sow-table tbody .sow-phase-row td:nth-child(3) { min-width: 240px; padding-right: 12px; } .sow-table thead th:nth-child(4), .sow-table tbody .sow-phase-row td:nth-child(4), .sow-table thead th:nth-child(5), .sow-table tbody .sow-phase-row td:nth-child(5) { width: 1%; white-space: nowrap; color: var(--gray-500); font-size: 12px; font-variant-numeric: tabular-nums; padding-left: 8px; padding-right: 8px; } .sow-table thead th:nth-child(6), .sow-table tbody .sow-phase-row td:nth-child(6) { width: 1%; white-space: nowrap; text-align: right; font-weight: 600; color: var(--gray-900); font-variant-numeric: tabular-nums; padding-right: 16px; } .sow-table thead th:nth-child(7), .sow-table tbody .sow-phase-row td:nth-child(7) { width: 1%; white-space: nowrap; text-align: right; color: var(--gray-600); font-variant-numeric: tabular-nums; padding-right: 16px; } .sow-table thead th:nth-child(8), .sow-table tbody .sow-phase-row td:nth-child(8) { width: 144px; padding: 16px 12px; } .sow-table thead th:nth-child(9), .sow-table tbody .sow-phase-row td:nth-child(9) { width: 1%; text-align: right; padding: 12px 16px 12px 4px; } /* Phase name + badge inline layout */ .sow-phase-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sow-phase-name-text { font-weight: 600; color: var(--gray-900); font-size: 13.5px; line-height: 1.4; } /* Status badges hidden - status conveyed by progress bar colour */ .sow-table .sow-phase-row > td:nth-child(3) .badge { display: none; } .sow-table .sow-phase-row > td:nth-child(3) { font-weight: 600; color: var(--gray-900); font-size: 13.5px; line-height: 1.4; } /* Item completion count badge next to phase name */ .sow-phase-count { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--gray-500); background: var(--gray-100); padding: 2px 8px; border-radius: 999px; vertical-align: middle; font-variant-numeric: tabular-nums; } .sow-phase-count.all-done { background: #d1fae5; color: #065f46; } /* Progress bar - cleaner */ .sow-progress { display: flex; align-items: center; gap: 10px; } .sow-progress-track { flex: 1; height: 5px; background: var(--gray-100); border-radius: 999px; overflow: hidden; } .sow-progress-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; } .sow-progress-fill.in-progress { background: #2a85ff; } .sow-progress-fill.complete { background: #10b981; } .sow-progress-fill.not-started { background: var(--gray-300); } .sow-progress-label { font-size: 11px; font-weight: 600; color: var(--gray-500); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; } /* Phase row action button group */ .sow-action-group { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; } /* Invoice action button - icon only, primary style */ .sow-invoice-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--primary); border: 1px solid var(--primary); border-radius: 6px; color: #fff; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 1px 2px rgba(159, 140, 91, 0.18); padding: 0; } .sow-invoice-btn:hover { background: var(--primary-deep, #7a6b46); border-color: var(--primary-deep, #7a6b46); box-shadow: 0 2px 6px rgba(159, 140, 91, 0.32); } .sow-invoice-btn svg { flex-shrink: 0; } .sow-table .sow-phase-row[data-fully-invoiced="true"] .sow-invoice-btn { opacity: 0.35; pointer-events: none; } /* Phase edit/delete icon buttons */ .sow-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: #fff; border: 1px solid var(--gray-200); border-radius: 6px; color: var(--gray-500); cursor: pointer; transition: all 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.04); padding: 0; } .sow-icon-btn:hover { background: var(--gray-50); border-color: var(--gray-300); color: var(--gray-800); } .sow-icon-btn.sow-icon-delete:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; } .sow-icon-btn.sow-icon-save { background: #10b981; border-color: #10b981; color: #fff; } .sow-icon-btn.sow-icon-save:hover { background: #059669; border-color: #059669; } /* Edit mode - inline inputs in phase row */ .sow-table .sow-phase-row.sow-editing td input.sow-edit-input { width: 100%; padding: 6px 10px; font-size: 13px; font-family: inherit; color: var(--gray-900); border: 1px solid var(--gray-300); border-radius: 5px; background: #fff; box-sizing: border-box; } .sow-table .sow-phase-row.sow-editing td input.sow-edit-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(159, 140, 91, 0.15); } .sow-table .sow-phase-row.sow-editing td input.sow-edit-input.sow-edit-money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .sow-table .sow-phase-row.sow-editing td input.sow-edit-input.sow-edit-date { font-variant-numeric: tabular-nums; padding: 6px 8px; } .sow-table .sow-phase-row.sow-editing { background: #fffbeb; } .sow-table .sow-phase-row.sow-editing:hover { background: #fffbeb; } /* Footer total row */ .sow-table tfoot td { padding: 16px 10px; background: var(--gray-50); font-size: 13px; border-top: 2px solid var(--gray-200); font-weight: 700; color: var(--gray-900); font-variant-numeric: tabular-nums; } .sow-table tfoot td:first-child { padding-left: 16px; } .sow-table tfoot td:last-child { padding-right: 16px; } /* Detail row container - subtle background, minimal padding */ .sow-table .sow-detail-row > td { padding: 0 !important; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); width: 100%; } .sow-table .sow-detail-row > td > div { padding: 0 0 4px 0 !important; box-sizing: border-box; } /* Items table inside expanded phase */ .sow-items-table { width: 100%; table-layout: auto; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; } /* Override inline shadow for consistency */ .sow-table .sow-detail-row > td > div > .sow-items-table { margin-top: 4px; } /* Item completion tick */ .sow-tick-th { width: 28px !important; padding: 10px 0 10px 14px !important; } .sow-tick-cell { width: 28px; padding: 10px 0 10px 14px !important; } .sow-tick { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--gray-300); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: all 0.15s ease; padding: 0; flex-shrink: 0; } .sow-tick:hover { border-color: #10b981; background: #f0fdf4; } .sow-tick.checked { border-color: #10b981; background: #10b981; } .sow-tick svg { opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } .sow-tick.checked svg { opacity: 1; } .sow-tick:hover svg { opacity: 0.5; } .sow-tick.checked:hover svg { opacity: 1; } /* Completed item row state */ .sow-items-table tr.sow-item-complete td { color: var(--gray-400); text-decoration: line-through; } .sow-items-table tr.sow-item-complete td:first-child, .sow-items-table tr.sow-item-complete .sow-tick { text-decoration: none; } .sow-items-table th { background: var(--gray-50); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); padding: 12px 14px; font-weight: 700; border-bottom: 1px solid var(--gray-200); text-align: left; white-space: nowrap; } .sow-items-table th.text-right { text-align: right; } .sow-items-table td { padding: 13px 14px; font-size: 13px; color: var(--gray-700); border-bottom: 1px solid var(--gray-100); vertical-align: middle; } .sow-items-table tbody tr:nth-child(even) td { background: rgba(250, 250, 250, 0.5); } .sow-items-table td.sow-tick-cell { padding: 13px 0 13px 14px; } .sow-items-table td:nth-child(2) { color: var(--gray-900); font-weight: 500; } .sow-items-table td.text-right { text-align: right; font-variant-numeric: tabular-nums; } .sow-items-table tr:last-child td { border-bottom: none; } .sow-items-table tbody tr { transition: background 0.12s ease; } .sow-items-table tbody tr:hover td { background: rgba(159, 140, 91, 0.05); } .sow-add-item-btn { display: inline-flex; align-items: center; gap: 6px; } .sow-add-item-btn:hover { background: var(--primary-subtle); border-color: var(--primary); color: var(--primary-deep); } .sow-inline-input { border: 1px solid transparent; background: transparent; padding: 6px 8px; font-size: 13px; font-family: inherit; color: var(--gray-800); border-radius: 4px; transition: border-color 0.15s, background 0.15s; } .sow-inline-input:hover { border-color: var(--gray-200); background: #fff; } .sow-inline-input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(159, 140, 91, 0.1); } .sow-items-table td input.sow-inline-input { box-sizing: border-box; } .sow-item-editing { background: rgba(159, 140, 91, 0.05); } .sow-item-remove { background: transparent; border: none; color: var(--gray-400); cursor: pointer; padding: 4px; border-radius: 4px; transition: color 0.15s, background 0.15s; display: inline-flex; align-items: center; justify-content: center; } .sow-item-remove:hover { color: #ef4444; background: #fee2e2; } /* Gantt Chart */ .gantt-container { overflow-x: auto; background: #fff; } .gantt-header { display: grid; grid-template-columns: 280px 1fr; border-bottom: 2px solid var(--gray-200); background: var(--gray-50); position: sticky; top: 0; z-index: 2; } .gantt-header-label { padding: 12px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--gray-600); letter-spacing: 0.05em; border-right: 1px solid var(--gray-200); } .gantt-timeline { display: flex; min-width: 900px; } .gantt-month { flex: 1; padding: 12px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--gray-500); text-align: center; border-right: 1px solid var(--gray-100); min-width: 75px; } .gantt-row { display: grid; grid-template-columns: 280px 1fr; border-bottom: 1px solid var(--gray-100); min-height: 44px; } .gantt-row:hover { background: var(--gray-50); } .gantt-label { padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--gray-700); border-right: 1px solid var(--gray-200); } .gantt-label-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gray-100); color: var(--gray-600); font-size: 11px; font-weight: 600; flex-shrink: 0; } .gantt-track { position: relative; min-width: 900px; display: flex; } .gantt-track-cell { flex: 1; border-right: 1px solid var(--gray-100); min-width: 75px; } .gantt-bar { position: absolute; top: 10px; height: 22px; border-radius: 4px; display: flex; align-items: center; padding: 0 10px; font-size: 11px; font-weight: 600; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gantt-bar-complete { background: #10b981; } .gantt-bar-progress { background: var(--primary); } .gantt-bar-upcoming { background: #94a3b8; } .gantt-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #ef4444; z-index: 1; pointer-events: none; } .gantt-today-label { position: absolute; top: -8px; left: -18px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; } /* Design Area — list view, collapsible sections */ .design-section { margin-bottom: 12px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; } .design-section-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); cursor: pointer; user-select: none; transition: background 0.15s; } .design-section-header:hover { background: var(--gray-100); } .design-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-700); display: flex; align-items: center; gap: 10px; } .design-section-chevron { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--gray-500); transition: transform 0.2s ease; flex-shrink: 0; } .design-section-chevron svg { width: 14px; height: 14px; } .design-section.collapsed .design-section-chevron { transform: rotate(-90deg); } .design-section-count { font-size: 11px; font-weight: 500; color: var(--gray-500); text-transform: none; letter-spacing: 0; } .design-items-grid { display: flex; flex-direction: column; padding: 0; } .design-section.collapsed .design-items-grid { display: none; } .design-item { display: flex; align-items: stretch; gap: 14px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--gray-100); transition: background 0.12s; cursor: pointer; } .design-item:last-child { border-bottom: none; } .design-item:hover { background: var(--gray-50); } .design-item-no-image { width: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; color: var(--gray-400); text-align: center; border: 1px dashed var(--gray-200); border-radius: 6px; padding: 6px; background: var(--gray-50); line-height: 1.25; } .design-item-body { flex: 1; min-width: 0; display: grid; grid-template-columns: 60px minmax(0, 1.4fr) minmax(0, 1.6fr) auto auto; column-gap: 14px; align-items: center; } .design-item-ref { font-size: 10px; font-weight: 600; color: var(--gray-400); letter-spacing: 0.05em; text-transform: uppercase; margin: 0; grid-column: 1; } .design-item-name { font-size: 13px; font-weight: 600; color: var(--gray-800); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; grid-column: 2; } .design-item-specs { font-size: 12px; color: var(--gray-500); line-height: 1.4; min-height: 0; margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; grid-column: 3; } .design-item-detail-row { font-size: 11px; color: var(--gray-500); margin-top: 4px; display: flex; align-items: center; gap: 4px; grid-column: 3; } .design-detail-label { font-weight: 600; color: var(--gray-600); font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; } .design-item-approvals { display: flex; gap: 6px; margin: 0; align-items: center; grid-column: 4; } .design-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 0; border-top: none; font-size: 11px; color: var(--gray-500); grid-column: 5; white-space: nowrap; } .design-item-meta-left { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--gray-500); white-space: nowrap; } .design-approval-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; border-radius: 4px; white-space: nowrap; } .design-approval-badge.approved { background: var(--success); color: #fff; } .design-approval-badge.pending { background: var(--warning); color: #fff; } @media (max-width: 900px) { .design-item-body { grid-template-columns: 1fr; gap: 4px; } .design-item-meta { flex-direction: row; flex-wrap: wrap; } } /* Design item detail modal */ .design-modal-body { padding: 0 !important; } .design-modal-gallery { background: var(--gray-50); padding: 20px 24px; border-bottom: 1px solid var(--gray-200); } .design-modal-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } .design-modal-thumb { aspect-ratio: 1; border-radius: 10px; background: var(--gray-100); background-size: cover; background-position: center; border: 1px solid var(--gray-200); position: relative; } .design-modal-thumb-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; font-family: inherit; } .design-modal-upload { aspect-ratio: 1; border-radius: 10px; border: 2px dashed var(--gray-300); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--gray-500); font-size: 11px; font-weight: 600; transition: all 0.15s; } .design-modal-upload:hover { border-color: var(--primary); color: var(--primary); background: rgba(159,140,91,0.04); } .design-modal-upload svg { width: 22px; height: 22px; } .design-modal-upload input { display: none; } .design-modal-empty { padding: 24px; border: 2px dashed var(--gray-200); border-radius: 10px; text-align: center; color: var(--gray-400); font-size: 12px; margin-bottom: 10px; } .design-modal-form { padding: 20px 24px; } .design-modal-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .design-modal-form .form-group { margin-bottom: 14px; } .design-modal-form .form-group:last-child { margin-bottom: 0; } .design-modal-form label { display: block; font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .design-modal-form input[type="text"], .design-modal-form input[type="url"], .design-modal-form input[type="number"], .design-modal-form input[type="date"], .design-modal-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: 8px; font-family: var(--font-body); font-size: 13px; color: var(--gray-800); background: #fff; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .design-modal-form textarea { resize: vertical; min-height: 72px; line-height: 1.6; } .design-modal-form input:focus, .design-modal-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(159, 140, 91, 0.12); } .design-modal-form input::placeholder, .design-modal-form textarea::placeholder { color: var(--gray-400); }