/* wwwroot/css/app.css */

/* ============================================================
   InvoiceHubs — CSS Variables Master List
   File: wwwroot/css/app.css
   Rule: Never hardcode values. Always use these variables.
   ============================================================ */

:root {

  /* ── Brand Colors ─────────────────────────────────────── */
  --color-primary:            #2563EB;
  --color-primary-dark:       #1D4ED8;
  --color-primary-light:      #DBEAFE;
  --color-primary-soft:       #EFF6FF;

  /* ── Semantic Colors ──────────────────────────────────── */
  --color-success:            #10B981;
  --color-success-light:      #D1FAE5;
  --color-warning:            #F59E0B;
  --color-warning-light:      #FEF3C7;
  --color-danger:             #EF4444;
  --color-danger-light:       #FEE2E2;
  --color-info:                #3B82F6;
  --color-info-light:          #DBEAFE;

  /* ── Neutral Colors ───────────────────────────────────── */
  --color-gray-900:           #111827;
  --color-gray-700:           #374151;
  --color-gray-500:           #6B7280;
  --color-gray-300:           #D1D5DB;
  --color-gray-100:           #F3F4F6;
  --color-gray-50:            #F9FAFB;
  --color-white:              #FFFFFF;

  /* ── Text Colors ──────────────────────────────────────── */
  --color-text-primary:       var(--color-gray-900);
  --color-text-secondary:     var(--color-gray-700);
  --color-text-muted:         var(--color-gray-500);
  --color-text-inverse:       var(--color-white);
  --color-text-link:          var(--color-primary);
  --color-text-link-hover:    var(--color-primary-dark);

  /* ── Background Colors ────────────────────────────────── */
  --color-bg-page:            var(--color-white);
  --color-bg-subtle:          var(--color-gray-50);
  --color-bg-muted:           var(--color-gray-100);
  --color-bg-card:            var(--color-white);
  --color-bg-hero:            var(--color-primary-soft);
  --color-bg-cta:             var(--color-primary);
  --color-bg-preview:         var(--color-gray-100);

  /* ── Border Colors ────────────────────────────────────── */
  --color-border-default:     var(--color-gray-300);
  --color-border-subtle:      var(--color-gray-100);
  --color-border-focus:       var(--color-primary);
  --color-border-danger:      var(--color-danger);

  /* ── Typography: Font Family ──────────────────────────── */
  --font-family-base:         'Inter', 'Segoe UI', 'Roboto', 'Arial', sans-serif;
  --font-family-mono:         'Courier New', 'Courier', monospace;

  /* ── Typography: Font Size ────────────────────────────── */
  --font-size-hero:           48px;
  --font-size-h1:              36px;
  --font-size-h2:              28px;
  --font-size-h3:              22px;
  --font-size-h4:              18px;
  --font-size-body:            16px;
  --font-size-small:           14px;
  --font-size-caption:         12px;

  /* ── Typography: Font Weight ──────────────────────────── */
  --font-weight-regular:      400;
  --font-weight-medium:       500;
  --font-weight-semibold:     600;
  --font-weight-bold:         700;

  /* ── Typography: Line Height ──────────────────────────── */
  --line-height-tight:        1.3;
  --line-height-base:         1.6;
  --line-height-loose:        1.8;

  /* ── Spacing Scale ────────────────────────────────────── */
  --spacing-1:                8px;
  --spacing-2:                16px;
  --spacing-3:                24px;
  --spacing-4:                40px;
  --spacing-5:                60px;
  --spacing-6:                80px;

  /* ── Spacing Semantic Aliases ─────────────────────────── */
  --spacing-card-padding:     var(--spacing-3);
  --spacing-section-y:        var(--spacing-5);
  --spacing-form-gap:         var(--spacing-2);
  --spacing-input-padding-x:  16px;
  --spacing-input-padding-y:  12px;

  /* ── Border Radius ────────────────────────────────────── */
  --radius-sm:                6px;
  --radius-md:                10px;
  --radius-lg:                16px;
  --radius-xl:                24px;
  --radius-full:              9999px;

  /* ── Border Radius Semantic Aliases ───────────────────── */
  --radius-btn:                var(--radius-md);
  --radius-input:              var(--radius-md);
  --radius-card:                var(--radius-lg);
  --radius-badge:              var(--radius-sm);
  --radius-document:          var(--radius-sm);

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-xs:                0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:                0 1px 3px rgba(0, 0, 0, 0.08),
                              0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:                0 4px 6px rgba(0, 0, 0, 0.07),
                              0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:                0 10px 15px rgba(0, 0, 0, 0.08),
                              0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl:                0 20px 25px rgba(0, 0, 0, 0.08),
                              0 10px 10px rgba(0, 0, 0, 0.03);
  --shadow-focus:              0 0 0 3px rgba(37, 99, 235, 0.25);

  /* ── Shadow Semantic Aliases ──────────────────────────── */
  --shadow-card:                var(--shadow-sm);
  --shadow-card-hover:        var(--shadow-md);
  --shadow-document:          var(--shadow-xl);
  --shadow-dropdown:          var(--shadow-md);
  --shadow-input-focus:        var(--shadow-focus);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-duration-fast: 150ms;
  --transition-duration-base: 200ms;
  --transition-duration-slow: 300ms;
  --transition-easing-default:ease;
  --transition-easing-in:      ease-in;
  --transition-easing-out:    ease-out;
  --transition-easing-in-out: ease-in-out;
  --transition-base:          all var(--transition-duration-base)
                              var(--transition-easing-default);

  /* ── Buttons ──────────────────────────────────────────── */
  --btn-height:                48px;
  --btn-height-sm:              36px;
  --btn-height-lg:              56px;
  --btn-padding-x:              24px;
  --btn-padding-x-sm:          16px;
  --btn-padding-x-lg:          32px;
  --btn-font-size:              var(--font-size-body);
  --btn-font-weight:          var(--font-weight-semibold);
  --btn-border-radius:        var(--radius-btn);
  --btn-transition:            var(--transition-base);
  --btn-primary-bg:            var(--color-primary);
  --btn-primary-bg-hover:      var(--color-primary-dark);
  --btn-primary-text:          var(--color-white);
  --btn-primary-border:        var(--color-primary);
  --btn-outline-bg:            transparent;
  --btn-outline-bg-hover:      var(--color-primary-soft);
  --btn-outline-text:          var(--color-primary);
  --btn-outline-border:        var(--color-primary);
  --btn-danger-bg:              var(--color-danger);
  --btn-danger-bg-hover:        #DC2626;
  --btn-danger-text:            var(--color-white);
  --btn-disabled-opacity:      0.5;

  /* ── Inputs & Forms ───────────────────────────────────── */
  --input-height:              48px;
  --input-padding-x:          var(--spacing-input-padding-x);
  --input-padding-y:          var(--spacing-input-padding-y);
  --input-font-size:          var(--font-size-body);
  --input-font-family:        var(--font-family-base);
  --input-border-radius:      var(--radius-input);
  --input-border-color:        var(--color-border-default);
  --input-border-focus:        var(--color-border-focus);
  --input-bg:                  var(--color-white);
  --input-bg-disabled:        var(--color-bg-muted);
  --input-text-color:          var(--color-text-primary);
  --input-placeholder-color:  var(--color-text-muted);
  --input-shadow-focus:        var(--shadow-input-focus);
  --input-transition:          var(--transition-base);
  --input-border-error:        var(--color-border-danger);
  --input-text-error:          var(--color-danger);
  --input-bg-error:            var(--color-danger-light);
  --label-font-size:          var(--font-size-small);
  --label-font-weight:        var(--font-weight-medium);
  --label-color:                var(--color-text-secondary);
  --label-margin-bottom:      6px;

  /* ── Cards ────────────────────────────────────────────── */
  --card-bg:                    var(--color-bg-card);
  --card-border:                1px solid var(--color-border-default);
  --card-border-radius:        var(--radius-card);
  --card-padding:              var(--spacing-card-padding);
  --card-shadow:                var(--shadow-card);
  --card-shadow-hover:        var(--shadow-card-hover);
  --card-transition:          var(--transition-base);

  /* ── Header / Navigation ──────────────────────────────── */
  --header-height:              68px;
  --header-bg:                  var(--color-white);
  --header-border:              1px solid var(--color-border-subtle);
  --header-shadow:              var(--shadow-xs);
  --header-z-index:            1000;
  --nav-link-color:            var(--color-text-secondary);
  --nav-link-color-hover:      var(--color-primary);
  --nav-link-color-active:    var(--color-primary);
  --nav-link-font-size:        var(--font-size-body);
  --nav-link-font-weight:      var(--font-weight-medium);
  --dropdown-bg:                var(--color-white);
  --dropdown-border:            1px solid var(--color-border-default);
  --dropdown-shadow:            var(--shadow-dropdown);
  --dropdown-border-radius:    var(--radius-md);

  /* ── Footer ───────────────────────────────────────────── */
  --footer-bg:                  var(--color-gray-900);
  --footer-text-color:        var(--color-gray-300);
  --footer-heading-color:      var(--color-white);
  --footer-link-color:        var(--color-gray-300);
  --footer-link-hover:        var(--color-white);
  --footer-border-top:        1px solid rgba(255, 255, 255, 0.08);
  --footer-padding-y:          var(--spacing-5);

  /* ── Document Preview ─────────────────────────────────── */
  --preview-bg:                var(--color-bg-preview);
  --preview-paper-bg:          var(--color-white);
  --preview-paper-shadow:      var(--shadow-document);
  --preview-paper-radius:      var(--radius-document);
  --preview-paper-padding:    40px;
  --preview-paper-width:      794px;
  --preview-paper-min-height: 1123px;

  /* ── Document Editor ──────────────────────────────────── */
  --editor-form-bg:            var(--color-white);
  --editor-form-border:        1px solid var(--color-border-subtle);
  --editor-preview-bg:        var(--color-bg-preview);
  --editor-toolbar-bg:        var(--color-gray-50);
  --editor-toolbar-border:    1px solid var(--color-border-default);
  --editor-toolbar-height:    56px;

  /* ── Hero Section ─────────────────────────────────────── */
  --hero-bg:                    var(--color-bg-hero);
  --hero-padding-y:            var(--spacing-6);
  --hero-title-size:            var(--font-size-hero);
  --hero-title-weight:        var(--font-weight-bold);
  --hero-title-color:          var(--color-text-primary);
  --hero-description-size:    var(--font-size-h4);
  --hero-description-color:    var(--color-text-secondary);

  /* ── Sections ─────────────────────────────────────────── */
  --section-padding-y:        var(--spacing-5);
  --section-title-size:        var(--font-size-h2);
  --section-title-weight:      var(--font-weight-semibold);
  --section-title-color:      var(--color-text-primary);
  --section-subtitle-size:    var(--font-size-body);
  --section-subtitle-color:    var(--color-text-muted);

  /* ── FAQ ──────────────────────────────────────────────── */
  --faq-item-border:            1px solid var(--color-border-default);
  --faq-item-radius:            var(--radius-md);
  --faq-item-bg:                var(--color-white);
  --faq-item-bg-open:          var(--color-primary-soft);
  --faq-question-size:        var(--font-size-body);
  --faq-question-weight:      var(--font-weight-semibold);
  --faq-question-color:        var(--color-text-primary);
  --faq-answer-size:            var(--font-size-body);
  --faq-answer-color:          var(--color-text-secondary);
  --faq-icon-color:            var(--color-primary);
  --faq-transition:            var(--transition-duration-slow)
                              var(--transition-easing-in-out);

  /* ── Toast Notifications ──────────────────────────────── */
  --toast-border-radius:      var(--radius-md);
  --toast-padding:              var(--spacing-2) var(--spacing-3);
  --toast-font-size:            var(--font-size-small);
  --toast-font-weight:        var(--font-weight-medium);
  --toast-shadow:                var(--shadow-lg);
  --toast-z-index:              9999;
  --toast-success-bg:          var(--color-success);
  --toast-success-text:        var(--color-white);
  --toast-error-bg:            var(--color-danger);
  --toast-error-text:          var(--color-white);
  --toast-info-bg:              var(--color-info);
  --toast-info-text:            var(--color-white);
  --toast-warning-bg:          var(--color-warning);
  --toast-warning-text:        var(--color-white);

  /* ── Invoice Items Table ──────────────────────────────── */
  --table-header-bg:            var(--color-gray-50);
  --table-header-text:          var(--color-text-secondary);
  --table-header-font-size:    var(--font-size-small);
  --table-header-weight:      var(--font-weight-semibold);
  --table-row-border:          1px solid var(--color-border-default);
  --table-row-bg-alt:          var(--color-gray-50);
  --table-cell-padding:        12px 8px;
  --table-input-height:        40px;
  --table-total-weight:        var(--font-weight-bold);
  --table-total-color:        var(--color-text-primary);

  /* ── Badges ───────────────────────────────────────────── */
  --badge-font-size:            var(--font-size-caption);
  --badge-font-weight:          var(--font-weight-medium);
  --badge-padding:              4px 10px;
  --badge-border-radius:      var(--radius-badge);
  --badge-primary-bg:          var(--color-primary-light);
  --badge-primary-text:        var(--color-primary-dark);
  --badge-success-bg:          var(--color-success-light);
  --badge-success-text:        var(--color-success);
  --badge-warning-bg:          var(--color-warning-light);
  --badge-warning-text:        var(--color-warning);
  --badge-danger-bg:            var(--color-danger-light);
  --badge-danger-text:          var(--color-danger);

  /* ── Trust Badges ─────────────────────────────────────── */
  --trust-badge-font-size:    var(--font-size-small);
  --trust-badge-color:        var(--color-text-secondary);
  --trust-badge-icon-color:    var(--color-success);
  --trust-badge-gap:            var(--spacing-1);

  /* ── Z-Index Scale ────────────────────────────────────── */
  --z-index-base:              0;
  --z-index-raised:            10;
  --z-index-dropdown:          200;
  --z-index-sticky:            500;
  --z-index-header:            var(--header-z-index);
  --z-index-modal:              2000;
  --z-index-toast:              var(--toast-z-index);

}

/* ============================================================
   Inter — Local Font Faces
   Files served from wwwroot/fonts/inter/. No Google Fonts CDN.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter/inter-700.woff2') format('woff2');
}

/* ============================================================
   Global Reset
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-text-link-hover);
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ============================================================
   Base Typography
   ============================================================ */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

small {
  font-size: var(--font-size-small);
}

/* ============================================================
   Focus Visibility (Accessibility)
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ============================================================
   Bootstrap Overrides
   Reuse Bootstrap 5 grid/utilities, but every visual token
   is repointed at our own variables so nothing is hardcoded.
   ============================================================ */

.btn {
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-border-radius);
  transition: var(--btn-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  border-width: 1px;
  border-style: solid;
}

.btn-sm {
  height: var(--btn-height-sm);
  padding: 0 var(--btn-padding-x-sm);
}

.btn-lg {
  height: var(--btn-height-lg);
  padding: 0 var(--btn-padding-x-lg);
}

.btn-primary {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
}

.btn-outline-primary {
  background-color: var(--btn-outline-bg);
  border-color: var(--btn-outline-border);
  color: var(--btn-outline-text);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--btn-outline-bg-hover);
  border-color: var(--btn-outline-border);
  color: var(--btn-outline-text);
}

.btn-danger {
  background-color: var(--btn-danger-bg);
  border-color: var(--btn-danger-bg);
  color: var(--btn-danger-text);
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-bg-hover);
  color: var(--btn-danger-text);
}

.btn:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: not-allowed;
}

.form-control,
.form-select {
  height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--input-font-size);
  font-family: var(--input-font-family);
  color: var(--input-text-color);
  background-color: var(--input-bg);
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  transition: var(--input-transition);
}

.form-control::placeholder {
  color: var(--input-placeholder-color);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

.form-control:disabled {
  background-color: var(--input-bg-disabled);
}

.form-label {
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
  color: var(--label-color);
  margin-bottom: var(--label-margin-bottom);
}

.is-invalid {
  border-color: var(--input-border-error) !important;
}

.invalid-feedback {
  color: var(--input-text-error);
  font-size: var(--font-size-small);
}

/* ============================================================
   Toast Notifications
   #toast-container lives directly in _Layout.cshtml, so its
   styling belongs in the global stylesheet rather than a
   partial-scoped CSS file.
   ============================================================ */

#toast-container {
  position: fixed;
  bottom: var(--spacing-3);
  right: var(--spacing-3);
  z-index: var(--z-index-toast);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.toast-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  min-width: 280px;
  max-width: 360px;
  padding: var(--toast-padding);
  border-radius: var(--toast-border-radius);
  font-size: var(--toast-font-size);
  font-weight: var(--toast-font-weight);
  box-shadow: var(--toast-shadow);
}

.toast-message-success {
  background-color: var(--toast-success-bg);
  color: var(--toast-success-text);
}

.toast-message-error {
  background-color: var(--toast-error-bg);
  color: var(--toast-error-text);
}

.toast-message-info {
  background-color: var(--toast-info-bg);
  color: var(--toast-info-text);
}

.toast-message-warning {
  background-color: var(--toast-warning-bg);
  color: var(--toast-warning-text);
}

.toast-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.8;
  line-height: 1;
}

.toast-dismiss:hover {
  opacity: 1;
}