/* ============================================================
   Global PBX Invoices — Apple-style design system
   ============================================================ */

/* ----- Tokens (light) ----- */
:root{
  --brand:#006666;
  --brand-strong:#004d4d;
  --brand-soft: rgba(0,102,102,.10);
  --brand-soft: color-mix(in srgb, var(--brand) 10%, transparent);

  --bg:#f5f7f8;
  --surface:#ffffff;
  --surface-2:#fafbfc;
  --surface-glass: rgba(255,255,255,.72);

  --border: rgba(60,60,67,.12);
  --border-strong: rgba(60,60,67,.20);

  --text:#1c1c1e;
  --text-2:#3a3a3c;
  --muted:#8e8e93;

  --hover: rgba(0,102,102,.06);
  --hover: color-mix(in srgb, var(--brand) 6%, transparent);

  --success:#34c759;
  --warning:#ff9f0a;
  --danger:#ff3b30;
  --info:#0a84ff;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 20px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);

  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:20px;
  --r-2xl:28px;
  --r-pill:999px;

  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-standard: cubic-bezier(.4,0,.2,1);

  --fs-caption: .75rem;
  --fs-footnote: .8125rem;
  --fs-body: .9375rem;
  --fs-callout: 1rem;
  --fs-headline: 1.0625rem;
  --fs-title3: 1.25rem;
  --fs-title2: 1.375rem;
  --fs-title1: 1.75rem;
  --fs-display: 2.125rem;
}

/* ----- Tokens (dark) ----- */
html[data-theme="dark"]{
  --brand:#2dd4bf;
  --brand-strong:#5eead4;
  --brand-soft: rgba(45,212,191,.14);
  --brand-soft: color-mix(in srgb, var(--brand) 14%, transparent);

  --bg:#000000;
  --surface:#1c1c1e;
  --surface-2:#2c2c2e;
  --surface-glass: rgba(28,28,30,.72);

  --border: rgba(84,84,88,.36);
  --border-strong: rgba(84,84,88,.65);

  --text:#ffffff;
  --text-2:#ebebf5;
  --muted: rgba(235,235,245,.60);

  --hover: rgba(255,255,255,.06);
  --hover: color-mix(in srgb, var(--brand) 12%, transparent);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 6px 18px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 48px rgba(0,0,0,.65);
}

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

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Segoe UI", system-ui, "Helvetica Neue", Arial,
               "Noto Sans Georgian", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6 { letter-spacing: -.011em; color: var(--text); margin: 0; }
h1 { font-size: var(--fs-title1); font-weight: 700; }
h2 { font-size: var(--fs-title2); font-weight: 700; }
h3 { font-size: var(--fs-title3); font-weight: 600; }
h4 { font-size: var(--fs-headline); font-weight: 600; }
h5,h6 { font-size: var(--fs-callout); font-weight: 600; }

p { margin: 0; }
a { color: var(--brand); text-decoration: none; transition: opacity .15s var(--ease-standard); }
a:hover { opacity: .8; }

hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; opacity: 1; }

::selection { background: var(--brand-soft); color: var(--text); }

/* Subtle scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--muted); background-clip: content-box; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Utility helpers
   ============================================================ */
.text-main, .text-brand { color: var(--brand) !important; }
.text-muted, .text-secondary { color: var(--muted) !important; }
.bg-app { background: var(--bg) !important; }
.bg-surface { background: var(--surface) !important; }
.hairline { border-top: 1px solid var(--border); }
.hairline-y { border-bottom: 1px solid var(--border); }

/* ============================================================
   App shell layout
   ============================================================ */
.app-shell{
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.app-body{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  min-height: calc(100vh - 56px);
}

.app-content{
  padding: 1.25rem 1.5rem 3rem;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 991.98px){
  .app-body{ grid-template-columns: 1fr; }
  .app-content{ padding: 1rem 1rem 4rem; }
}

/* ============================================================
   Glass navbar
   ============================================================ */
.glass-nav{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--surface-glass);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass-nav{ background: var(--surface); }
}

.nav-row{
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 56px;
  padding: 0 1rem;
}
.nav-brand{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: var(--fs-headline);
  color: var(--text);
  letter-spacing: -.01em;
}
.nav-brand .brand-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  box-shadow: 0 2px 6px rgba(0,102,102,.25);
}
.nav-spacer{ flex: 1; }

/* ============================================================
   Icon button (circular)
   ============================================================ */
.icon-btn{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s var(--ease-standard),
              transform .12s var(--ease-standard),
              border-color .15s;
  padding: 0;
}
.icon-btn:hover{ background: var(--hover); }
.icon-btn:active{ transform: scale(.94); }
.icon-btn svg{ width: 18px; height: 18px; stroke-width: 1.8; }

.icon-btn.icon-btn--danger{ color: var(--danger); }
.icon-btn.icon-btn--danger:hover{
  background: rgba(255,59,48,.10);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: rgba(255,59,48,.30);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.icon-btn--sm{ width: 32px; height: 32px; }
.icon-btn--sm svg{ width: 16px; height: 16px; }

/* ============================================================
   Sidebar
   ============================================================ */
.app-sidebar{
  background: var(--surface-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--border);
  padding: 1rem .75rem;
  position: sticky;
  top: 56px;
  align-self: start;
  height: calc(100vh - 56px);
  overflow-y: auto;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .app-sidebar{ background: var(--surface); }
}

.sidebar-section-label{
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: .75rem .75rem .375rem;
}

.side-link{
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .75rem;
  margin: 2px 0;
  border-radius: var(--r-md);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-callout);
  font-weight: 500;
  transition: background .15s var(--ease-standard), color .15s;
}
.side-link svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted);
  transition: color .15s;
}
.side-link:hover{
  background: var(--hover);
  color: var(--text);
  opacity: 1;
}
.side-link:hover svg{ color: var(--brand); }
.side-link.is-active{
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}
.side-link.is-active svg{ color: var(--brand); }

.offcanvas.sheet-offcanvas{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-right: 1px solid var(--border);
  --bs-offcanvas-width: 300px;
}
.offcanvas.sheet-offcanvas .offcanvas-header{
  border-bottom: 1px solid var(--border);
  padding: 1rem 1rem;
}
.offcanvas.sheet-offcanvas .offcanvas-body{
  padding: 1rem;
}

/* ============================================================
   Buttons (.btn-apple + variants)
   ============================================================ */
.btn-apple{
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .625rem 1.125rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-callout);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -.01em;
  transition: transform .12s var(--ease-standard),
              background .15s var(--ease-standard),
              border-color .15s,
              box-shadow .15s,
              opacity .15s;
  user-select: none;
  -webkit-user-select: none;
}
.btn-apple:hover{ opacity: .9; }
.btn-apple:active{ transform: scale(.97); }
.btn-apple:disabled, .btn-apple.disabled{
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}
.btn-apple svg{ width: 18px; height: 18px; flex-shrink: 0; }

.btn-apple--sm{
  min-height: 36px;
  padding: .375rem .875rem;
  font-size: var(--fs-footnote);
}
.btn-apple--sm svg{ width: 15px; height: 15px; }

.btn-apple--lg{
  min-height: 52px;
  padding: .875rem 1.5rem;
  font-size: var(--fs-headline);
}

.btn-apple--block{ width: 100%; }

/* primary — filled brand */
.btn-apple--primary{
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,102,102,.20);
}
.btn-apple--primary:hover{ background: var(--brand-strong); opacity: 1; color: #fff; }
html[data-theme="dark"] .btn-apple--primary{ color: #003c3c; }
html[data-theme="dark"] .btn-apple--primary:hover{ color: #002828; }

/* tinted — soft brand */
.btn-apple--tinted{
  background: var(--brand-soft);
  color: var(--brand);
}
.btn-apple--tinted:hover{
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  opacity: 1;
  color: var(--brand);
}

/* plain — text only */
.btn-apple--plain{
  background: transparent;
  color: var(--brand);
  padding-left: .5rem;
  padding-right: .5rem;
}
.btn-apple--plain:hover{
  background: var(--hover);
  opacity: 1;
}

/* danger */
.btn-apple--danger{
  background: var(--danger);
  color: #fff;
}
.btn-apple--danger:hover{ background: #d70015; opacity: 1; color: #fff; }

.btn-apple--danger-tinted{
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}
.btn-apple--danger-tinted:hover{
  background: color-mix(in srgb, var(--danger) 20%, transparent);
  opacity: 1;
}

/* outline secondary */
.btn-apple--outline{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-apple--outline:hover{
  background: var(--hover);
  border-color: var(--brand);
  color: var(--brand);
  opacity: 1;
}

/* success tinted */
.btn-apple--success-tinted{
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: #1f8a3a;
}
html[data-theme="dark"] .btn-apple--success-tinted{ color: var(--success); }
.btn-apple--success-tinted:hover{
  background: color-mix(in srgb, var(--success) 22%, transparent);
  opacity: 1;
}

/* warning tinted */
.btn-apple--warning-tinted{
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: #b86c00;
}
html[data-theme="dark"] .btn-apple--warning-tinted{ color: var(--warning); }
.btn-apple--warning-tinted:hover{
  background: color-mix(in srgb, var(--warning) 24%, transparent);
  opacity: 1;
}

/* ============================================================
   Inputs (.input-apple) + Bootstrap form-control override
   ============================================================ */
.input-apple,
.form-control,
.form-select{
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: .65rem 1rem;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-callout);
  line-height: 1.3;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.form-control-sm, .form-select-sm{
  min-height: 36px;
  padding: .375rem .75rem;
  font-size: var(--fs-footnote);
  border-radius: var(--r-sm);
}
.input-apple:focus,
.form-control:focus,
.form-select:focus{
  outline: none;
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.input-apple::placeholder,
.form-control::placeholder{
  color: var(--muted);
  opacity: 1;
}
.form-select{
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%238e8e93' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 14px;
  padding-right: 2.25rem;
}

textarea.form-control{ min-height: 96px; resize: vertical; }

.form-label{
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: .35rem;
  letter-spacing: -.005em;
}
.form-text{
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-top: .35rem;
}

/* Read-only inputs feel a bit softer */
input[readonly].form-control,
input[readonly].input-apple{
  background: var(--bg);
  color: var(--text-2);
}

/* File input */
.form-control[type="file"]{
  padding: .55rem .75rem;
  font-size: var(--fs-footnote);
}

/* Search input with leading icon (used in clients page) */
.search-input{
  position: relative;
}
.search-input > svg{
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.search-input input{ padding-left: 2.5rem; }

/* ============================================================
   Surfaces / cards
   ============================================================ */
.surface,
.card-soft{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease-standard),
              transform .25s var(--ease-standard);
}
.surface--padded{ padding: 1.25rem; }
.surface--hover:hover{
  box-shadow: var(--shadow-md);
}

.surface-2{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.card{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}

/* ============================================================
   Badges
   ============================================================ */
.badge,
.badge-tinted{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .6rem;
  font-size: var(--fs-caption);
  font-weight: 600;
  border-radius: var(--r-pill);
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
}

.badge.bg-success{
  background: color-mix(in srgb, var(--success) 16%, transparent) !important;
  color: #1f8a3a !important;
}
html[data-theme="dark"] .badge.bg-success{ color: var(--success) !important; }

.badge.bg-warning{
  background: color-mix(in srgb, var(--warning) 18%, transparent) !important;
  color: #b86c00 !important;
}
html[data-theme="dark"] .badge.bg-warning{ color: var(--warning) !important; }

.badge.bg-secondary{
  background: color-mix(in srgb, var(--muted) 20%, transparent) !important;
  color: var(--text-2) !important;
}

.badge.bg-light{
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border);
}

.badge-brand{
  background: var(--brand-soft);
  color: var(--brand);
}

/* ============================================================
   Segmented control
   ============================================================ */
.segmented{
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  gap: 2px;
  position: relative;
}
.segmented input{
  position: absolute;
  width: 0; height: 0; opacity: 0; pointer-events: none;
}
.segmented label{
  cursor: pointer;
  padding: .4rem 1rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--text-2);
  transition: background .2s var(--ease-standard), color .2s, box-shadow .2s;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
.segmented input:checked + label{
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}
html[data-theme="dark"] .segmented input:checked + label{
  background: var(--surface);
  color: var(--brand);
}
.segmented label:hover{
  color: var(--text);
}
.segmented input:checked + label:hover{ color: var(--brand); }

/* ============================================================
   iOS-style switch
   ============================================================ */
.switch{
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
}
.switch input{
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.switch .slider{
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--muted) 40%, transparent);
  border-radius: 999px;
  transition: background .25s var(--ease-standard);
  cursor: pointer;
}
.switch .slider::before{
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.20), 0 0 0 .5px rgba(0,0,0,.05);
  transition: transform .25s var(--ease-spring);
}
.switch input:checked + .slider{
  background: var(--success);
}
.switch input:checked + .slider::before{
  transform: translateX(20px);
}
.switch input:focus-visible + .slider{
  box-shadow: 0 0 0 4px var(--brand-soft);
}

/* ============================================================
   List item (used for rows on dashboard / mobile)
   ============================================================ */
.list-flush{
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.list-flush > .list-item:not(:last-child){
  border-bottom: 1px solid var(--border);
}
.list-item{
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  min-height: 56px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.list-item:hover{ background: var(--hover); opacity: 1; }
.list-item .avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-footnote);
  flex-shrink: 0;
  text-transform: uppercase;
}
.list-item .body{ flex: 1; min-width: 0; }
.list-item .body .title{
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-callout);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-item .body .meta{
  font-size: var(--fs-footnote);
  color: var(--muted);
}
.list-item .trailing{
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  text-align: right;
}

/* ============================================================
   Modal / Sheet
   ============================================================ */
.modal-content{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-header{
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 1.25rem;
}
.modal-title{
  font-weight: 700;
  letter-spacing: -.01em;
}
.modal-body{ padding: 1.25rem; }
.modal-footer{
  border-top: 1px solid var(--border);
  padding: 1rem 1.25rem;
  gap: .5rem;
}
.modal-backdrop.show{
  opacity: .35;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.modal-backdrop{ background: #000; }

/* Bottom-sheet on mobile */
@media (max-width: 575.98px){
  .modal-dialog.modal-dialog-centered{
    align-items: flex-end;
    margin: 0;
    max-width: 100%;
    min-height: 100%;
  }
  .modal-content{
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Bootstrap btn-close → use icon font is fine; restyle */
.btn-close{
  width: 32px; height: 32px;
  border-radius: 50%;
  background-color: var(--surface-2);
  background-size: 12px;
  opacity: .8;
  transition: background-color .15s, opacity .15s;
  padding: 0;
  margin: 0;
}
.btn-close:hover{ background-color: var(--hover); opacity: 1; }
html[data-theme="dark"] .btn-close{ filter: invert(1) hue-rotate(180deg) brightness(1.3); }

/* ============================================================
   Tables
   ============================================================ */
.table{
  color: var(--text);
  margin: 0;
}
.table thead th{
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border) !important;
  background: transparent;
}
.table > :not(caption) > * > *{
  border-color: var(--border) !important;
  padding: .75rem .65rem;
}
.table-sm > :not(caption) > * > *{
  padding: .5rem .55rem;
}
.table-hover > tbody > tr:hover > * {
  background: var(--hover) !important;
  color: var(--text);
}

/* ============================================================
   Alerts
   ============================================================ */
.alert{
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--fs-callout);
  padding: .75rem 1rem;
}
.alert-success{
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: #1f8a3a;
  border-color: color-mix(in srgb, var(--success) 25%, transparent);
}
html[data-theme="dark"] .alert-success{ color: var(--success); }
.alert-warning{
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: #b86c00;
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
}
html[data-theme="dark"] .alert-warning{ color: var(--warning); }
.alert-danger{
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: #b8160b;
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}
html[data-theme="dark"] .alert-danger{ color: var(--danger); }
.alert-info{
  background: color-mix(in srgb, var(--info) 12%, transparent);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 25%, transparent);
}

/* ============================================================
   Page header (used across pages)
   ============================================================ */
.page-header{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}
.page-header h1{
  font-size: var(--fs-title1);
  font-weight: 700;
  letter-spacing: -.02em;
}
.page-header .page-title-sm{
  display: block;
  font-size: var(--fs-footnote);
  font-weight: 500;
  color: var(--muted);
  margin-bottom: .2rem;
  letter-spacing: 0;
  text-transform: none;
}

/* Stat / KPI card */
.stat-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: box-shadow .25s var(--ease-standard), transform .2s;
}
.stat-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card .stat-label{
  font-size: var(--fs-footnote);
  color: var(--muted);
  font-weight: 500;
}
.stat-card .stat-value{
  font-size: var(--fs-title1);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.stat-card .stat-value.brand{ color: var(--brand); }
.stat-card .stat-icon{
  align-self: flex-end;
  margin-top: -1.6rem;
  margin-bottom: -.6rem;
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stat-card .stat-icon svg{ width: 18px; height: 18px; }

/* ============================================================
   Drag-and-drop file dropzone
   ============================================================ */
.dropzone{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .5rem;
  min-height: 130px;
  padding: 1.25rem;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.dropzone:hover, .dropzone.is-hover{
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}
.dropzone input[type="file"]{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.dropzone .dz-icon{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dropzone .dz-icon svg{ width: 20px; height: 20px; }
.dropzone .dz-title{ font-weight: 600; color: var(--text); }
.dropzone .dz-hint{ font-size: var(--fs-footnote); color: var(--muted); }

/* Progress bar */
.progress-apple{
  width: 100%;
  height: 6px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress-apple > span{
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: inherit;
  transition: width .25s var(--ease-standard);
}

/* Contract row */
.contract-row{
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.contract-row + .contract-row{ margin-top: .4rem; }
.contract-row .file-icon{
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contract-row .file-icon svg{ width: 18px; height: 18px; }
.contract-row .file-body{ flex: 1; min-width: 0; }
.contract-row .file-name{
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-callout);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contract-row .file-meta{
  font-size: var(--fs-caption);
  color: var(--muted);
}
.contract-row .file-actions{
  display: flex;
  gap: .3rem;
  flex-shrink: 0;
}

/* ============================================================
   Bootstrap utility overrides
   ============================================================ */
.dropdown-menu{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  color: var(--text);
}
.dropdown-item{ color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus{ background: var(--hover); color: var(--text); }

/* Container helpers */
.container-narrow{ max-width: 980px; margin-inline: auto; }
.container-tight { max-width: 560px; margin-inline: auto; }

/* Print */
@media print{
  .glass-nav, .app-sidebar, .offcanvas, .no-print{ display: none !important; }
  .app-body{ grid-template-columns: 1fr; }
  .app-content{ padding: 0; }
  body{ background: #fff; color: #000; }
}