@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700;900&display=swap');

/* ============================================================
   OPSORA ERP — Design System
   Supports dark / light themes via CSS custom properties.
   Theme vars are defined in theme-dark.css / theme-light.css
   and swapped at runtime by app.js.
   ============================================================ */

/* ----- Base reset ----- */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }

/* ----- Body ----- */
.theme-body {
  background: var(--app-bg) !important;
  color:       var(--text-primary) !important;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:   0.9375rem;
  line-height: 1.6;
  min-height:  100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ----- Page structure ----- */
.app-page-wrapper { min-height: 100dvh; display: flex; flex-direction: column; }

.app-content {
  flex:    1;
  max-width: 80rem;
  width:   100%;
  margin:  0 auto;
  padding: 1rem 0.875rem 7rem;
}
@media (min-width: 640px) { .app-content { padding: 1.25rem 1.5rem 7rem; } }

/* ----- Header ----- */
.app-header {
  position:      sticky;
  top:           0;
  z-index:       50;
  background:    var(--panel-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow:    var(--shadow-sm);
}

.app-header-inner {
  max-width: 80rem;
  margin:    0 auto;
  padding:   0.625rem 0.875rem;
  display:   flex;
  align-items:     center;
  justify-content: space-between;
  gap: 0.75rem;
}
@media (min-width: 640px) { .app-header-inner { padding: 0.75rem 1.5rem; } }

.app-brand { display: flex; flex-direction: column; min-width: 0; flex-shrink: 0; gap: 0.0625rem; }

/* Branded name — "OPSORA" gradient + "ERP" muted tag */
.app-brand-name {
  display:     flex;
  align-items: baseline;
  gap:         0.3rem;
  line-height: 1.15;
  white-space: nowrap;
}
.brand-opsora {
  font-family:  'Poppins', Inter, system-ui, sans-serif;
  font-size:    1.0625rem;
  font-weight:  900;
  letter-spacing: -0.025em;
  background:   linear-gradient(130deg, #10b981 0%, #06b6d4 55%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color:        transparent;
}
.brand-erp {
  font-family:  'Poppins', Inter, system-ui, sans-serif;
  font-size:    0.625rem;
  font-weight:  700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:        var(--text-secondary) !important;
  -webkit-text-fill-color: var(--text-secondary);
  padding-bottom: 0.1rem;
}
.brand-version {
  font-size:    0.5625rem;
  font-weight:  600;
  letter-spacing: 0.05em;
  color:        var(--primary) !important;
  background:   var(--success-bg);
  border:       1px solid var(--success-border);
  padding:      0.0625rem 0.3125rem;
  border-radius: 9999px;
  white-space:  nowrap;
  align-self:   center;
  -webkit-text-fill-color: var(--primary);
}
.app-brand-tagline { font-size: 0.625rem; color: var(--text-secondary) !important; letter-spacing: 0.01em; }

.app-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

.app-user-chip {
  font-size:   0.75rem;
  font-weight: 600;
  color:       var(--text-primary) !important;
  background:  var(--inner-bg);
  border:      1px solid var(--border);
  padding:     0.25rem 0.625rem;
  border-radius: 9999px;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   10rem;
  display:     none;
}
@media (min-width: 480px) { .app-user-chip { display: block; } }

.app-header-link {
  font-size:       0.75rem;
  font-weight:     500;
  padding:         0.3125rem 0.625rem;
  border-radius:   6px;
  text-decoration: none !important;
  color:           var(--text-secondary) !important;
  white-space:     nowrap;
}
.app-header-link:hover { background: var(--inner-bg); color: var(--text-primary) !important; filter: none !important; }
.app-header-link-danger { color: var(--danger) !important; }
.app-header-link-danger:hover { background: var(--danger-bg) !important; color: var(--danger) !important; }

.theme-toggle-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           0.25rem;
  padding:       0.3125rem 0.75rem;
  border-radius: 8px;
  border:        1px solid var(--border) !important;
  background:    var(--inner-bg) !important;
  color:         var(--text-primary) !important;
  font-size:     0.6875rem;
  font-weight:   700;
  letter-spacing: 0.02em;
  cursor:        pointer;
  white-space:   nowrap;
  text-transform: uppercase;
}
.theme-toggle-btn:hover { border-color: var(--primary) !important; color: var(--primary) !important; filter: none !important; }

/* ----- Tailwind class → CSS var overrides (makes light theme work) ----- */
.bg-slate-900  { background-color: var(--panel-bg) !important; }
.bg-slate-950  { background-color: var(--inner-bg)  !important; }
.bg-opsoraBg   { background-color: var(--inner-bg)  !important; }
.bg-slate-800  { background-color: var(--surface-2) !important; }
.bg-white      { background-color: var(--panel-bg)  !important; }

.border-slate-700, .border-slate-800, .border-opsoraBorder { border-color: var(--border) !important; }

.text-slate-100, .text-slate-200, .text-slate-900, .text-black { color: var(--text-primary)   !important; }
.text-slate-300  { color: var(--text-label)     !important; }
.text-slate-400, .text-slate-500 { color: var(--text-secondary) !important; }
.text-emerald-400 { color: var(--primary)       !important; }
.text-emerald-300 { color: var(--success-text)  !important; }
.text-rose-400    { color: var(--danger)         !important; }
.text-rose-300    { color: var(--danger)         !important; }
.text-sky-400     { color: var(--sky-text)       !important; }
.text-sky-300     { color: var(--sky-text)       !important; }

/* ----- Typography ----- */
h2 { font-size: 1.0625rem !important; font-weight: 700 !important; color: var(--text-primary) !important; letter-spacing: -0.015em; line-height: 1.3; }

/* ----- Forms ----- */
form label, label.block {
  font-size:     0.8125rem !important;
  font-weight:   500 !important;
  color:         var(--text-label) !important;
  display:       block !important;
  margin-bottom: 0.4375rem !important;
  line-height:   1.4;
}

input, select, textarea {
  background:    var(--inner-bg) !important;
  color:         var(--text-primary) !important;
  border:        1px solid var(--border) !important;
  border-radius: 0.5rem !important;
  padding:       0.5625rem 0.75rem !important;
  font-size:     0.875rem !important;
  font-family:   inherit !important;
  line-height:   1.5 !important;
  width:         100%;
  display:       block;
  transition:    border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow:    var(--shadow-sm) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-secondary) !important; opacity: 0.6 !important; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-ring) !important; }
input[type="file"] { padding: 0.375rem 0.625rem !important; cursor: pointer; }
select option      { background: var(--panel-bg); color: var(--text-primary); }
form.grid          { gap: 1.125rem !important; }

/* ----- Buttons ----- */
.bg-emerald-500, button.bg-emerald-500, a.bg-emerald-500 {
  background:    var(--primary) !important;
  color:         var(--primary-text) !important;
  border:        none !important;
  box-shadow:    0 1px 4px rgba(0,0,0,0.20) !important;
  font-weight:   600 !important;
  cursor:        pointer;
}
.bg-emerald-500:hover, button.bg-emerald-500:hover, a.bg-emerald-500:hover {
  background:  var(--primary-hover) !important;
  box-shadow:  0 2px 8px rgba(0,0,0,0.30) !important;
  filter:      none !important;
}
a.bg-slate-800, button.bg-slate-800 {
  background: var(--surface-2) !important;
  color:      var(--text-primary) !important;
  border:     1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
a.bg-slate-800:hover, button.bg-slate-800:hover { border-color: var(--border-strong) !important; filter: none !important; }

/* ----- Cards / Sections ----- */
section.bg-slate-900, section.bg-slate-950 { background: var(--panel-bg) !important; border-color: var(--border) !important; box-shadow: var(--shadow-sm); }

/* ----- Flash messages ----- */
[class*="bg-emerald-900"] { background: var(--success-bg) !important; color: var(--success-text) !important; }
[class*="bg-rose-900"]    { background: var(--danger-bg)  !important; color: var(--danger)       !important; }
.border-emerald-700 { border-color: var(--success-border) !important; }
.border-rose-700    { border-color: var(--danger-border)  !important; }

/* ----- Bottom Nav ----- */
.app-bottom-nav {
  position:      fixed;
  bottom:        0.5rem;
  left:          0.5rem;
  right:         0.5rem;
  background:    var(--panel-bg) !important;
  border:        1px solid var(--border) !important;
  border-radius: 1.125rem;
  z-index:       50;
  box-shadow:    var(--shadow-lg);
  overflow:      hidden;
}
.app-bottom-nav-list {
  display:               grid;
  grid-template-columns: repeat(5,1fr);
  list-style:            none;
  margin:                0;
  padding:               0.3125rem 0.25rem;
}
.app-nav-link {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.1875rem;
  padding:         0.5rem 0.125rem;
  border-radius:   0.75rem;
  text-decoration: none !important;
  font-size:       0.5625rem;
  font-weight:     600;
  letter-spacing:  0.03em;
  color:           var(--text-secondary) !important;
  transition:      background 0.15s, color 0.15s !important;
}
.app-nav-link:hover  { background: var(--inner-bg); color: var(--text-primary) !important; filter: none !important; }
.app-nav-link.nav-active { background: var(--success-bg); color: var(--primary) !important; }
.app-nav-link svg    { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
@media (min-width: 400px) { .app-nav-link { font-size: 0.625rem; padding: 0.5rem 0.25rem; } .app-nav-link svg { width: 1.375rem; height: 1.375rem; } }

/* Copyright bar inside bottom nav */
.app-nav-copyright {
  text-align:  center;
  font-size:   0.5rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color:       var(--text-secondary) !important;
  padding:     0.3125rem 0.5rem 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.app-nav-copyright span { color: var(--primary) !important; font-weight: 700; }

/* ----- Tables ----- */
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table th { color: var(--text-secondary) !important; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--inner-bg); }
table td { color: var(--text-primary) !important; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
table tr:last-child td { border-bottom: none; }

/* ----- Global transitions ----- */
a, button { transition: all 0.15s ease !important; }
a:hover, button:hover { filter: none !important; }
img { max-width: 100%; height: auto; }

/* ----- Responsive line items grid (invoice-create) ----- */
.line-items-row {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0.5rem;
  margin-bottom:         0.75rem;
}
@media (min-width: 480px) { .line-items-row { grid-template-columns: 6fr 2fr 4fr; } }

.line-items-header { display: none; }
@media (min-width: 480px) {
  .line-items-header {
    display:               grid;
    grid-template-columns: 6fr 2fr 4fr;
    gap:                   0.5rem;
    margin-bottom:         0.375rem;
  }
}