Spaces:
Sleeping
Sleeping
| :root { | |
| --bg: #f5f5f5; | |
| --panel-bg: #ffffff; | |
| --text: #202124; | |
| --muted: #5f6368; | |
| --accent: #1a73e8; | |
| --danger: #c5221f; | |
| --border: #dadce0; | |
| --radius: 10px; | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.08); | |
| font-family: "Roboto", "Segoe UI", Tahoma, sans-serif; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| background: linear-gradient(180deg, #f7f9fc 0%, #eef1f6 100%); | |
| color: var(--text); | |
| } | |
| .container { | |
| max-width: 980px; | |
| margin: 0 auto; | |
| padding: 40px 20px 64px; | |
| } | |
| .header-section { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 16px; | |
| margin-bottom: 32px; | |
| text-align: center; | |
| } | |
| .logo-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .logo { | |
| max-width: 180px; | |
| height: auto; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .app-title { | |
| text-align: center; | |
| font-size: 24px; | |
| margin: 0; | |
| font-weight: 600; | |
| } | |
| .app-description { | |
| text-align: center; | |
| font-size: 16px; | |
| color: var(--muted); | |
| line-height: 1.5; | |
| margin: 0; | |
| max-width: 600px; | |
| } | |
| .panel { | |
| background: var(--panel-bg); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| padding: 28px 32px; | |
| margin-bottom: 32px; | |
| border: 1px solid rgba(32, 33, 36, 0.08); | |
| } | |
| .auth-card { | |
| border: 1px solid rgba(32, 33, 36, 0.12); | |
| border-radius: var(--radius); | |
| padding: 24px 28px; | |
| background: #f9fbff; | |
| display: grid; | |
| gap: 18px; | |
| max-width: 520px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| .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-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| font-size: 14px; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| .ghost-button { | |
| padding: 10px 20px; | |
| border: 1px solid var(--accent); | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--accent); | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background 0.2s ease, color 0.2s ease; | |
| } | |
| .ghost-button:hover { | |
| background: rgba(26, 115, 232, 0.12); | |
| } | |
| .form-divider { | |
| border: none; | |
| border-top: 1px solid var(--border); | |
| margin: 16px 0 0; | |
| } | |
| .register-fields { | |
| display: grid; | |
| gap: 24px; | |
| } | |
| .register-credentials { | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| } | |
| .register-company { | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .form { | |
| display: grid; | |
| gap: 20px; | |
| } | |
| .field-grid { | |
| display: grid; | |
| gap: 18px 24px; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| } | |
| label { | |
| display: grid; | |
| gap: 8px; | |
| font-weight: 600; | |
| font-size: 15px; | |
| } | |
| input, | |
| textarea, | |
| select { | |
| padding: 12px 14px; | |
| border-radius: 8px; | |
| border: 1px solid var(--border); | |
| font-size: 15px; | |
| background: #fbfbff; | |
| } | |
| input:focus, | |
| textarea:focus, | |
| select:focus { | |
| outline: 2px solid rgba(26, 115, 232, 0.35); | |
| outline-offset: 1px; | |
| border-color: var(--accent); | |
| background: #ffffff; | |
| } | |
| textarea { | |
| resize: vertical; | |
| min-height: 96px; | |
| } | |
| #exemption-note-wrapper { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| #exemption-note-wrapper textarea[readonly] { | |
| background: #f4f6fb; | |
| color: var(--muted); | |
| } | |
| button { | |
| padding: 12px 20px; | |
| border-radius: 8px; | |
| border: none; | |
| font-size: 15px; | |
| font-weight: 600; | |
| background: var(--accent); | |
| color: white; | |
| cursor: pointer; | |
| transition: background 0.2s ease; | |
| } | |
| button:hover { | |
| background: #0f5ec4; | |
| } | |
| .button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 12px 20px; | |
| border-radius: 8px; | |
| border: none; | |
| font-size: 15px; | |
| font-weight: 600; | |
| background: var(--accent); | |
| color: #ffffff; | |
| cursor: pointer; | |
| transition: background 0.2s ease; | |
| } | |
| .button.secondary { | |
| background: rgba(26, 115, 232, 0.12); | |
| color: var(--accent); | |
| border: 1px solid rgba(26, 115, 232, 0.25); | |
| } | |
| .button.secondary:hover { | |
| background: rgba(26, 115, 232, 0.2); | |
| } | |
| .button input[type="file"] { | |
| display: none; | |
| } | |
| button:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| .link-button { | |
| background: none; | |
| color: var(--accent); | |
| padding: 0; | |
| } | |
| .link-button:hover { | |
| color: #0f5ec4; | |
| background: 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; | |
| margin-bottom: 24px; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| } | |
| .app-subtitle { | |
| margin: 4px 0 0; | |
| color: var(--muted); | |
| font-size: 14px; | |
| } | |
| .app-nav { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .app-nav-button { | |
| background: rgba(26, 115, 232, 0.12); | |
| color: var(--accent); | |
| border: 1px solid rgba(26, 115, 232, 0.25); | |
| } | |
| .app-nav-button:hover { | |
| background: rgba(26, 115, 232, 0.2); | |
| } | |
| .app-nav-button.active { | |
| background: var(--accent); | |
| color: #ffffff; | |
| } | |
| .app-nav-button.active:hover { | |
| background: #0f5ec4; | |
| } | |
| .business-section { | |
| border: 1px solid rgba(32, 33, 36, 0.08); | |
| border-radius: var(--radius); | |
| padding: 20px 24px; | |
| background: #fbfcff; | |
| margin-bottom: 24px; | |
| } | |
| .app-view { | |
| display: grid; | |
| gap: 24px; | |
| } | |
| .business-section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 12px; | |
| } | |
| .business-actions { | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| } | |
| .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: 8px; | |
| padding: 12px; | |
| display: grid; | |
| gap: 8px; | |
| max-width: 260px; | |
| background: #ffffff; | |
| } | |
| .logo-preview-label { | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--muted); | |
| font-weight: 600; | |
| } | |
| .logo-preview img { | |
| max-width: 100%; | |
| max-height: 120px; | |
| object-fit: contain; | |
| } | |
| .form-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .items-section { | |
| border: 1px solid rgba(32, 33, 36, 0.08); | |
| border-radius: var(--radius); | |
| padding: 20px 24px; | |
| background: #ffffff; | |
| display: grid; | |
| gap: 18px; | |
| } | |
| .items-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .items-table-wrapper { | |
| overflow-x: auto; | |
| } | |
| .items-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 14px; | |
| } | |
| .items-table th, | |
| .items-table td { | |
| border: 1px solid var(--border); | |
| padding: 10px 12px; | |
| text-align: left; | |
| } | |
| .items-table th { | |
| background: #f1f3f7; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.02em; | |
| } | |
| .items-table input, | |
| .items-table select { | |
| width: 100%; | |
| padding: 8px 10px; | |
| border-radius: 6px; | |
| border: 1px solid var(--border); | |
| background: #ffffff; | |
| } | |
| .items-table .remove-item { | |
| color: var(--danger); | |
| background: none; | |
| padding: 0; | |
| } | |
| .items-table .remove-item:hover { | |
| text-decoration: underline; | |
| } | |
| .totals { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| font-weight: 600; | |
| margin-top: 8px; | |
| padding: 12px 16px; | |
| border-radius: 8px; | |
| background: #f7f9ff; | |
| } | |
| .rate-summary { | |
| display: grid; | |
| gap: 10px; | |
| margin-top: 8px; | |
| } | |
| .rate-summary-item { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| font-weight: 600; | |
| padding: 8px 12px; | |
| border: 1px dashed rgba(26, 115, 232, 0.25); | |
| border-radius: 6px; | |
| 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; | |
| } | |
| .filters { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| align-items: flex-end; | |
| } | |
| .dashboard-summary { | |
| display: grid; | |
| gap: 16px; | |
| margin: 24px 0; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| } | |
| .summary-card { | |
| border: 1px solid rgba(32, 33, 36, 0.08); | |
| border-radius: var(--radius); | |
| background: #fbfcff; | |
| padding: 16px; | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .summary-label { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .summary-count { | |
| font-size: 20px; | |
| font-weight: 700; | |
| } | |
| .summary-amount { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| } | |
| .dashboard-chart { | |
| border: 1px solid rgba(32, 33, 36, 0.08); | |
| border-radius: var(--radius); | |
| background: #ffffff; | |
| padding: 16px; | |
| } | |
| .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; | |
| } | |
| @media (max-width: 640px) { | |
| .panel { | |
| padding: 20px; | |
| } | |
| .header-section { | |
| flex-direction: column; | |
| text-align: center; | |
| gap: 16px; | |
| } | |
| .logo { | |
| max-width: 150px; | |
| } | |
| .app-title { | |
| font-size: 20px; | |
| } | |
| .app-header { | |
| flex-direction: column; | |
| gap: 12px; | |
| align-items: flex-start; | |
| } | |
| .business-section, | |
| .items-section { | |
| padding: 16px; | |
| } | |
| } | |