/* Global theme + UI primitives (light/dark) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('./buttons.css');
@import url('./forms.css');
@import url('./tables.css');


:root{
  color-scheme: light;

  --bg: #f1f5f9;
  --bg-2: #eaf0f8;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --muted: #475569;
  --border: #e2e8f0;

  --primary: #2563eb;
  --primary-2: #1d4ed8;
  --primary-contrast: #ffffff;

  --sidebar: #1e293b;
  --sidebar-2: #0f172a;
  --sidebar-text: #cbd5e1;
  --sidebar-hover: #334155;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 10px 25px rgba(0,0,0,.08);

  --radius-sm: 8px;
  --radius-md: 12px;

  --ring: 0 0 0 3px rgba(37, 99, 235, .18);

  --dur-1: 120ms;
  --dur-2: 220ms;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* Auth gradient */
  --auth-grad-a: #1f3c88;
  --auth-grad-b: #4a69bd;
}

html[data-theme="dark"]{
  color-scheme: dark;

  --bg: #0b1220;
  --bg-2: #0f172a;
  --surface: #111b2e;
  --surface-2: #0f1a31;
  --text: #e5e7eb;
  --muted: #a7b2c2;
  --border: rgba(226, 232, 240, .12);

  --primary: #60a5fa;
  --primary-2: #3b82f6;
  --primary-contrast: #0b1220;

  --sidebar: #0b1220;
  --sidebar-2: #091022;
  --sidebar-text: #cbd5e1;
  --sidebar-hover: rgba(148, 163, 184, .12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 12px 30px rgba(0,0,0,.45);

  --ring: 0 0 0 3px rgba(96, 165, 250, .22);

  --auth-grad-a: #050a16;
  --auth-grad-b: #0f1a31;
}

*{ box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth theme transitions (respect reduced motion) */
html.theme-anim *{
  transition:
    background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}
@media (prefers-reduced-motion: reduce){
  html.theme-anim *{ transition: none !important; }
}

/* Shared button styles */
.theme-toggle{
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 12px;
  height: 40px;
  min-width: 44px; /* better mobile tap target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease);
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover{ transform: translateY(-1px); }
.theme-toggle:active{ transform: translateY(0); }
.theme-toggle:focus{ outline: none; box-shadow: var(--shadow-sm), var(--ring); }

.theme-toggle .icon{
  width: 18px;
  height: 18px;
  display: block;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.theme-toggle.is-dark .icon{
  transform: rotate(-18deg) scale(1.02);
}

@media (prefers-reduced-motion: no-preference){
  .theme-toggle:active .icon{
    transform: scale(.92);
    opacity: .9;
  }
}

/* Auth pages */
body.auth-page{
  min-height: 100vh;
  background: linear-gradient(135deg, var(--auth-grad-a), var(--auth-grad-b));
}
body.auth-page .card,
body.auth-page .popup-content{
  background: var(--surface);
  color: var(--text);
}
body.auth-page .subtitle{ color: var(--muted); }
body.auth-page .card input{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

/* Position toggle on auth screens */
.auth-theme-toggle{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
}

/* Micro-animations */
.fx-pop{
  animation: fx-pop 260ms var(--ease) both;
}
@keyframes fx-pop{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* =========================================
   UTILITIES (To replace inline styles)
========================================= */

/* Typography */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.font-weight-bold, .fw-bold { font-weight: 600 !important; }
.text-xs { font-size: 12px !important; }
.text-sm { font-size: 14px !important; }

/* Colors */
.text-danger { color: #e63946 !important; }
.text-success { color: #28a745 !important; }
.text-muted { color: var(--muted) !important; }
.text-primary { color: var(--primary) !important; }

/* Spacing */
.mt-1 { margin-top: 5px !important; }
.mt-2 { margin-top: 10px !important; }
.mt-3 { margin-top: 15px !important; }
.mb-1 { margin-bottom: 5px !important; }
.mb-2 { margin-bottom: 10px !important; }
.mb-3 { margin-bottom: 15px !important; }
.mb-4 { margin-bottom: 20px !important; }
.p-1 { padding: 5px !important; }
.p-2 { padding: 10px !important; }
.p-3 { padding: 15px !important; }
.p-4 { padding: 20px !important; }

/* Layout & sizing */
.w-100 { width: 100% !important; }
.d-flex { display: flex !important; }
.justify-between { justify-content: space-between !important; }
.align-center { align-items: center !important; }
.d-none { display: none !important; }
.pointer { cursor: pointer !important; }
.rounded-md { border-radius: 8px !important; }
.rounded-lg { border-radius: 12px !important; }

/* =========================================
   BILL DETAILS SPECIFIC STYLES
========================================= */

.bill-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}

.bill-card {
    background: var(--surface, white);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.bill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.bill-grid label {
    font-weight: 600;
    color: var(--muted, #555);
}

.status-badge {
    display: inline-block;
    background: #16c784;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    margin-bottom: 15px;
}

.bill-image {
    width: 100%;
    max-height: 600px;
    object-fit: contain;
    border-radius: 8px;
}

.bill-pdf {
    width: 100%;
    height: 650px;
    border: none;
    border-radius: 8px;
}

.download-btn {
    display: inline-block;
    margin-top: 15px;
    background: var(--primary, #2c7be5);
    color: white;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
}

.download-btn:hover {
    background: var(--primary-hover, #1a5edb);
}

@media (max-width:1024px) {
    .bill-wrapper {
        grid-template-columns: 1fr;
    }

    .bill-pdf {
        height: 450px;
    }
}

@media (max-width:600px) {
    .bill-grid {
        grid-template-columns: 1fr;
    }

    .bill-pdf {
        height: 350px;
    }

    .download-btn {
        width: 100%;
        text-align: center;
    }
}