Upload styles.css

static/css/styles.css

@@ -1,365 +1,705 @@
-: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: "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;
-}
-
-h1 {
-  text-align: center;
-  font-size: 32px;
-  margin-bottom: 32px;
-}
-
-.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);
-}
-
-.panel h2 {
-  margin-top: 0;
-}
-
-.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;
-}
-
-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: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;
-}
-
+: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.error {
-  color: var(--danger);
-}
-
-.feedback.success {
-  color: #188038;
-}
-
-.invoice-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-}
-
-.business-section {
-  border: 1px solid rgba(32, 33, 36, 0.08);
-  border-radius: var(--radius);
-  padding: 20px 24px;
-  background: #fbfcff;
-  margin-bottom: 24px;
-}
-
-.business-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.business-display {
-  display: grid;
-  gap: 6px;
-  font-size: 15px;
-  line-height: 1.4;
-}
-
-.business-display strong {
-  font-weight: 600;
-}
-
-.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;
+.feedback:empty {
+  display: none;
 }
 
-.items-table .remove-item {
+.feedback.error {
   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;
-}
-
-@media (max-width: 640px) {
-  .panel {
-    padding: 20px;
-  }
-
-  .invoice-header {
-    flex-direction: column;
-    gap: 12px;
-    align-items: flex-start;
-  }
-
-  .business-section,
-  .items-section {
-    padding: 16px;
-  }
 }
+
+.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;
+  }
+}