Spaces:
Sleeping
Sleeping
| :root { | |
| --bg: #e9eef5; | |
| --panel-bg: #ffffff; | |
| --surface: #f7f9ff; | |
| --surface-alt: #eef3ff; | |
| --text: #101828; | |
| --muted: #667085; | |
| --accent: #2563eb; | |
| --accent-dark: #1d4ed8; | |
| --accent-soft: rgba(37, 99, 235, 0.1); | |
| --danger: #dc2626; | |
| --border: #dfe4ee; | |
| --radius: 16px; | |
| --radius-sm: 10px; | |
| --shadow: 0 25px 60px rgba(15, 23, 42, 0.08); | |
| font-family: "Roboto", "Segoe UI", Tahoma, sans-serif; | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: "Roboto", "Segoe UI", Tahoma, sans-serif; | |
| color: var(--text); | |
| line-height: 1.6; | |
| background: radial-gradient(circle at top, #f5f7ff 0%, #e7edf8 60%, #dee5f1 100%); | |
| min-height: 100vh; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 48px 32px 80px; | |
| display: grid; | |
| gap: 32px; | |
| } | |
| .brand-banner { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 8px 0 16px; | |
| } | |
| .brand-logo { | |
| max-width: 220px; | |
| width: 100%; | |
| height: auto; | |
| border-radius: 16px; | |
| box-shadow: 0 12px 35px rgba(15, 23, 42, 0.18); | |
| } | |
| .hero-panel { | |
| background: linear-gradient(135deg, #fdfbff 0%, #f5f7ff 50%, #eef3ff 100%); | |
| } | |
| .hero-columns { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); | |
| gap: 40px; | |
| align-items: stretch; | |
| } | |
| .hero-content { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .hero-lead { | |
| margin: 0; | |
| color: var(--text); | |
| font-size: 16px; | |
| } | |
| .eyebrow { | |
| font-size: 13px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| color: var(--accent); | |
| margin: 0; | |
| } | |
| .app-title { | |
| font-size: 24px; | |
| margin: 0; | |
| font-weight: 700; | |
| line-height: 1.15; | |
| display: inline-block; | |
| width: fit-content; | |
| } | |
| .app-title::after { | |
| content: ""; | |
| display: block; | |
| width: 100%; | |
| height: 3px; | |
| background: var(--accent); | |
| margin-top: 8px; | |
| border-radius: 999px; | |
| } | |
| .app-description { | |
| font-size: 16px; | |
| color: var(--muted); | |
| margin: 0; | |
| max-width: 520px; | |
| } | |
| .header-highlights { | |
| list-style: none; | |
| padding: 0; | |
| margin: 12px 0 0; | |
| display: grid; | |
| gap: 16px; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| } | |
| .header-highlights li { | |
| padding: 18px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid rgba(16, 24, 40, 0.08); | |
| background: #ffffff; | |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .header-highlights strong { | |
| font-size: 15px; | |
| color: var(--accent); | |
| } | |
| .header-highlights span { | |
| font-size: 14px; | |
| color: var(--muted); | |
| } | |
| .panel { | |
| background: var(--panel-bg); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| padding: 36px; | |
| border: 1px solid rgba(15, 23, 42, 0.08); | |
| } | |
| .auth-card { | |
| border: 1px solid rgba(16, 24, 40, 0.08); | |
| border-radius: var(--radius); | |
| padding: 28px 32px; | |
| background: #ffffff; | |
| display: grid; | |
| gap: 20px; | |
| max-width: 520px; | |
| margin: 0 auto; | |
| width: 100%; | |
| box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08); | |
| } | |
| .auth-panel { | |
| display: grid; | |
| gap: 24px; | |
| height: 100%; | |
| background: rgba(255, 255, 255, 0.8); | |
| border-radius: var(--radius); | |
| padding: 24px 28px; | |
| border: 2px solid rgba(37, 99, 235, 0.4); | |
| box-shadow: 0 20px 35px rgba(15, 23, 42, 0.1); | |
| } | |
| .auth-panel-header { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .auth-headline { | |
| margin: 0; | |
| font-size: 22px; | |
| } | |
| .auth-copy { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 15px; | |
| } | |
| .auth-login { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .login-card { | |
| width: 100%; | |
| } | |
| #register-section { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| #register-section .register-card { | |
| max-width: 640px; | |
| width: 100%; | |
| } | |
| .register-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .auth-card h3 { | |
| margin: 0; | |
| } | |
| .auth-card .form { | |
| gap: 18px; | |
| width: 100%; | |
| } | |
| .auth-actions { | |
| margin-top: 4px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| font-size: 14px; | |
| color: var(--muted); | |
| } | |
| .ghost-button { | |
| padding: 12px 20px; | |
| border: 1px solid rgba(37, 99, 235, 0.35); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--accent); | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; | |
| } | |
| .ghost-button:hover { | |
| background: rgba(37, 99, 235, 0.08); | |
| } | |
| .form-divider { | |
| border: none; | |
| border-top: 1px solid var(--border); | |
| margin: 16px 0 0; | |
| } | |
| .register-fields { | |
| display: grid; | |
| gap: 28px; | |
| } | |
| .register-credentials { | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| } | |
| .register-company { | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .form { | |
| display: grid; | |
| gap: 24px; | |
| width: 100%; | |
| } | |
| .client-lookup { | |
| position: relative; | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .client-lookup label { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--muted); | |
| } | |
| .client-lookup input { | |
| width: 100%; | |
| } | |
| .client-suggestions { | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| margin-top: 6px; | |
| background: #ffffff; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| box-shadow: 0 15px 35px rgba(15, 23, 42, 0.15); | |
| z-index: 5; | |
| max-height: 320px; | |
| overflow-y: auto; | |
| display: grid; | |
| } | |
| .client-suggestion { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 2px; | |
| padding: 10px 14px; | |
| border: none; | |
| border-bottom: 1px solid rgba(15, 23, 42, 0.08); | |
| background: none; | |
| cursor: pointer; | |
| text-align: left; | |
| font-size: 14px; | |
| } | |
| .client-suggestion:last-child { | |
| border-bottom: none; | |
| } | |
| .client-suggestion strong { | |
| font-size: 14px; | |
| color: var(--text); | |
| } | |
| .client-suggestion span { | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| .client-suggestions-empty { | |
| padding: 12px 14px; | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .field-grid { | |
| display: grid; | |
| gap: 20px 28px; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| } | |
| fieldset { | |
| border: 1px solid rgba(16, 24, 40, 0.1); | |
| border-radius: var(--radius); | |
| padding: 24px 28px 28px; | |
| display: grid; | |
| gap: 18px; | |
| background: var(--surface); | |
| margin: 0; | |
| } | |
| legend { | |
| font-weight: 700; | |
| font-size: 13px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--muted); | |
| padding: 0 8px; | |
| } | |
| label { | |
| display: grid; | |
| gap: 8px; | |
| font-weight: 600; | |
| font-size: 14px; | |
| } | |
| input, | |
| textarea, | |
| select { | |
| padding: 12px 16px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| font-size: 15px; | |
| background: #ffffff; | |
| min-height: 48px; | |
| transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; | |
| } | |
| input:focus, | |
| textarea:focus, | |
| select:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); | |
| background: #ffffff; | |
| } | |
| textarea { | |
| resize: vertical; | |
| min-height: 120px; | |
| } | |
| #exemption-note-wrapper { | |
| display: grid; | |
| gap: 12px; | |
| padding: 20px; | |
| border: 1px dashed rgba(16, 24, 40, 0.15); | |
| border-radius: var(--radius-sm); | |
| background: #ffffff; | |
| } | |
| #exemption-note-wrapper textarea[readonly] { | |
| background: #f4f6fb; | |
| color: var(--muted); | |
| } | |
| button { | |
| padding: 13px 28px; | |
| border-radius: var(--radius-sm); | |
| border: none; | |
| font-size: 15px; | |
| font-weight: 600; | |
| background: var(--accent); | |
| color: #ffffff; | |
| cursor: pointer; | |
| transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease; | |
| box-shadow: 0 15px 30px rgba(37, 99, 235, 0.25); | |
| } | |
| button:hover { | |
| background: var(--accent-dark); | |
| transform: translateY(-1px); | |
| box-shadow: 0 20px 35px rgba(37, 99, 235, 0.3); | |
| } | |
| button:focus-visible { | |
| outline: 3px solid rgba(37, 99, 235, 0.35); | |
| outline-offset: 2px; | |
| } | |
| .button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 13px 24px; | |
| border-radius: var(--radius-sm); | |
| border: none; | |
| font-size: 15px; | |
| font-weight: 600; | |
| background: var(--accent); | |
| color: #ffffff; | |
| cursor: pointer; | |
| transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease; | |
| box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2); | |
| } | |
| .button.secondary { | |
| background: rgba(37, 99, 235, 0.12); | |
| color: var(--accent); | |
| border: 1px solid rgba(37, 99, 235, 0.25); | |
| box-shadow: none; | |
| } | |
| .button.secondary:hover { | |
| background: rgba(37, 99, 235, 0.2); | |
| } | |
| .button input[type="file"] { | |
| display: none; | |
| } | |
| button:disabled { | |
| opacity: 0.55; | |
| cursor: not-allowed; | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| .link-button { | |
| background: none; | |
| color: var(--accent); | |
| padding: 0; | |
| border-radius: 0; | |
| box-shadow: none; | |
| transform: none; | |
| font-weight: 600; | |
| transition: color 0.2s ease; | |
| } | |
| .link-button:hover { | |
| color: var(--accent-dark); | |
| background: none; | |
| box-shadow: none; | |
| transform: none; | |
| } | |
| .hint { | |
| color: var(--muted); | |
| font-size: 13px; | |
| margin: 0; | |
| } | |
| .feedback { | |
| color: var(--muted); | |
| min-height: 20px; | |
| font-size: 14px; | |
| } | |
| .feedback:empty { | |
| display: none; | |
| } | |
| .feedback.error { | |
| color: var(--danger); | |
| } | |
| .feedback.success { | |
| color: #188038; | |
| } | |
| .app-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| padding-bottom: 12px; | |
| border-bottom: 1px solid rgba(15, 23, 42, 0.08); | |
| } | |
| .login-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 8px 14px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(37, 99, 235, 0.3); | |
| background: rgba(37, 99, 235, 0.08); | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .badge-label { | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| font-weight: 600; | |
| font-size: 11px; | |
| color: var(--muted); | |
| } | |
| .badge-value { | |
| font-weight: 700; | |
| color: var(--accent); | |
| } | |
| .app-nav { | |
| display: inline-flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| padding: 6px; | |
| background: var(--surface); | |
| border-radius: 999px; | |
| border: 1px solid rgba(15, 23, 42, 0.08); | |
| } | |
| .app-nav-button { | |
| background: transparent; | |
| color: var(--muted); | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 999px; | |
| box-shadow: none; | |
| transform: none; | |
| transition: background 0.2s ease, color 0.2s ease; | |
| } | |
| .app-nav-button:hover { | |
| background: rgba(37, 99, 235, 0.08); | |
| color: var(--text); | |
| box-shadow: none; | |
| transform: none; | |
| } | |
| .app-nav-button.active { | |
| background: #ffffff; | |
| color: var(--accent); | |
| box-shadow: 0 12px 25px rgba(15, 23, 42, 0.12); | |
| } | |
| .app-nav-button.active:hover { | |
| background: #ffffff; | |
| } | |
| .app-view { | |
| display: grid; | |
| gap: 32px; | |
| } | |
| .business-section { | |
| border: 1px solid rgba(15, 23, 42, 0.08); | |
| border-radius: var(--radius); | |
| padding: 28px 32px; | |
| background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%); | |
| display: grid; | |
| gap: 18px; | |
| } | |
| .business-section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 12px; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .business-actions { | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| } | |
| .pill-button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 1px solid rgba(37, 99, 235, 0.35); | |
| background: rgba(37, 99, 235, 0.08); | |
| color: var(--accent); | |
| padding: 8px 16px; | |
| border-radius: 999px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; | |
| min-height: 38px; | |
| height: 38px; | |
| } | |
| .pill-button:hover, | |
| .pill-button:focus-visible { | |
| background: rgba(37, 99, 235, 0.15); | |
| } | |
| .pill-button.secondary { | |
| background: #ffffff; | |
| } | |
| .pill-button.danger { | |
| border-color: rgba(220, 38, 38, 0.4); | |
| color: var(--danger); | |
| background: rgba(220, 38, 38, 0.08); | |
| } | |
| .pill-button.danger:hover, | |
| .pill-button.danger:focus-visible { | |
| background: rgba(220, 38, 38, 0.15); | |
| } | |
| .pill-button input[type="file"] { | |
| display: none; | |
| } | |
| .business-display { | |
| font-size: 15px; | |
| line-height: 1.4; | |
| } | |
| .business-display-grid { | |
| display: grid; | |
| gap: 12px; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| } | |
| .business-display-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .business-display-item strong { | |
| font-weight: 600; | |
| } | |
| .logo-preview { | |
| margin-top: 16px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 16px; | |
| display: grid; | |
| gap: 10px; | |
| max-width: 280px; | |
| background: #ffffff; | |
| box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); | |
| } | |
| .logo-preview-label { | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--muted); | |
| font-weight: 700; | |
| } | |
| .logo-preview img { | |
| max-width: 100%; | |
| max-height: 120px; | |
| object-fit: contain; | |
| } | |
| .form-actions { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| } | |
| .items-section { | |
| border: 1px solid rgba(15, 23, 42, 0.08); | |
| border-radius: var(--radius); | |
| padding: 24px 28px; | |
| background: #ffffff; | |
| display: grid; | |
| gap: 20px; | |
| } | |
| .items-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| } | |
| .items-table-wrapper { | |
| overflow-x: auto; | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| background: #ffffff; | |
| } | |
| .items-table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| font-size: 14px; | |
| } | |
| .items-table th, | |
| .items-table td { | |
| padding: 12px 14px; | |
| text-align: left; | |
| border-bottom: 1px solid rgba(15, 23, 42, 0.08); | |
| } | |
| .items-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .items-table th { | |
| background: var(--surface); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| .items-table tbody tr:nth-child(even) { | |
| background: rgba(37, 99, 235, 0.03); | |
| } | |
| .items-table tbody tr:hover { | |
| background: rgba(37, 99, 235, 0.08); | |
| } | |
| .items-table input, | |
| .items-table select { | |
| width: 100%; | |
| min-height: 44px; | |
| } | |
| .items-table .remove-item { | |
| color: var(--danger); | |
| background: none; | |
| padding: 0; | |
| box-shadow: none; | |
| } | |
| .items-table .remove-item:hover { | |
| text-decoration: underline; | |
| background: none; | |
| } | |
| .totals { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| gap: 16px; | |
| font-weight: 600; | |
| margin-top: 8px; | |
| padding: 0; | |
| } | |
| .totals span { | |
| display: block; | |
| padding: 14px 16px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| background: var(--surface); | |
| text-align: center; | |
| } | |
| .rate-summary { | |
| display: grid; | |
| gap: 10px; | |
| margin-top: 8px; | |
| } | |
| .rate-summary-item { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| font-weight: 600; | |
| padding: 12px 16px; | |
| border: 1px dashed rgba(37, 99, 235, 0.4); | |
| border-radius: var(--radius-sm); | |
| background: #ffffff; | |
| } | |
| .invoice-preview { | |
| display: grid; | |
| gap: 24px; | |
| } | |
| .invoice-preview-meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 24px; | |
| font-size: 14px; | |
| } | |
| .invoice-preview-meta span { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .invoice-preview-header { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 24px; | |
| } | |
| .invoice-preview-card { | |
| flex: 1 1 280px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 16px 20px; | |
| background: #f9fafc; | |
| } | |
| .invoice-preview-card h4 { | |
| margin: 0 0 12px; | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .invoice-preview-card p { | |
| margin: 4px 0; | |
| font-size: 14px; | |
| } | |
| .invoice-preview table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 14px; | |
| } | |
| .invoice-preview th, | |
| .invoice-preview td { | |
| border: 1px solid var(--border); | |
| padding: 10px 12px; | |
| text-align: left; | |
| } | |
| .invoice-preview th { | |
| background: #f1f3f7; | |
| font-weight: 600; | |
| } | |
| .invoice-preview-summary { | |
| display: flex; | |
| justify-content: flex-end; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| font-weight: 600; | |
| font-size: 15px; | |
| } | |
| .invoice-preview-note { | |
| padding: 12px 16px; | |
| border-left: 3px solid var(--accent); | |
| background: #f4f8ff; | |
| font-size: 14px; | |
| } | |
| .dashboard-header { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| border-bottom: 1px solid rgba(15, 23, 42, 0.08); | |
| padding-bottom: 12px; | |
| } | |
| .filters { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| align-items: flex-end; | |
| } | |
| .dashboard-summary { | |
| display: grid; | |
| gap: 18px; | |
| margin: 24px 0; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| } | |
| .summary-card { | |
| border: 1px solid rgba(15, 23, 42, 0.08); | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| padding: 20px; | |
| display: grid; | |
| gap: 8px; | |
| box-shadow: 0 12px 25px rgba(15, 23, 42, 0.08); | |
| } | |
| .summary-label { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .summary-count { | |
| font-size: 22px; | |
| font-weight: 700; | |
| } | |
| .summary-amount { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| } | |
| .dashboard-chart { | |
| border: 1px solid rgba(15, 23, 42, 0.08); | |
| border-radius: var(--radius); | |
| background: #ffffff; | |
| padding: 24px; | |
| box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08); | |
| } | |
| .dashboard-table .items-table th, | |
| .dashboard-table .items-table td { | |
| white-space: nowrap; | |
| } | |
| .dashboard-table .items-table td:last-child { | |
| width: 160px; | |
| } | |
| .table-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| #invoices-empty { | |
| margin-top: 12px; | |
| text-align: center; | |
| padding: 12px 0; | |
| } | |
| @media (max-width: 1024px) { | |
| .container { | |
| padding: 40px 24px 64px; | |
| } | |
| .hero-columns { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 900px) { | |
| .hero-columns { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .container { | |
| padding: 32px 16px 56px; | |
| } | |
| .panel { | |
| padding: 24px; | |
| } | |
| .brand-logo { | |
| max-width: 160px; | |
| } | |
| .app-title { | |
| font-size: 24px; | |
| } | |
| .auth-panel { | |
| grid-template-columns: 1fr; | |
| } | |
| .app-header { | |
| flex-direction: column; | |
| gap: 12px; | |
| align-items: flex-start; | |
| } | |
| .business-section, | |
| .items-section { | |
| padding: 20px; | |
| } | |
| } | |