/**
 * styles.css — QTN UI Theme (Rhine Synergy)
 * -----------------------------------------------------------------------------
 * Maintained collaboratively with ChatGPT (QTN workspace).
 *
 * Purpose
 * - Define global theme variables, layout primitives, and reusable UI components
 *   for the QTN (Quotation & Transaction Network) system.
 * - Ensure consistent look-and-feel across all modules (Quotations, Reports,
 *   Admin, etc.) while keeping layout predictable and maintainable.
 *
 * Change Log
 * - 2025-10-05 :
 *     • Added fallback for color-mix() in .sidenav
 *     • Added focus-visible styles for accessibility
 *     • Added default link styles in .main
 *     • Introduced basic .card, .table, and .btn utilities
 *     • Added print rules to hide navigation chrome
 *
 * - 2025-10-03 :
 *     • Added changelog header (aligned with QuotationsOnly.php format)
 *     • Fixed left navigation panel width using --sidenav-width
 *     • Added text truncation for long sidebar labels
 *     • Removed legacy 820px width breakpoint
 *
 * Version : 251005_1615
 *
 * Notes
 * - Sidebar width is intentionally fixed for UI stability.
 * - Layout uses flexbox to support viewport-height pages and internal scrolling.
 * - This stylesheet is shared across the entire QTN application.
 * -----------------------------------------------------------------------------
 */

/* ============================================================================
 * Root Variables (Theme, Layout, Effects)
 * ============================================================================ */
:root{
  /* Theme colors */
  --theme-blue:#0f4c8d;           /* Primary brand blue (top bar, buttons) */
  --theme-blue-dark:#0d3f76;      /* Hover / darker variant */
  --theme-blue-light:#3b76b7;     /* Active / highlighted tab */
  --brand-gold:#d2b460;           /* Brand accent */
  --panel:#9ab1ac;                /* Page background panel */
  --ink:#ffffff;                  /* Light text */
  --ink-dim:#e6eef8;              /* Muted light text */
  --ink-dark:#0b1f33;             /* Primary dark text */

  /* Layout */
  --sidenav-width: 150px;         /* Fixed left navigation width */

  /* Effects */
  --focus-ring: 0 0 0 3px rgba(210,180,96,.55); /* Gold focus outline */
}

/* ============================================================================
 * Global Reset / Base
 * ============================================================================ */
*{ box-sizing:border-box }
html, body{ height:100% }

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:#0b1f33;
  color:var(--ink);
}

/* ============================================================================
 * Frame (Overall Page Shell)
 * ============================================================================ */
.frame{
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border-top:2px solid var(--brand-gold);
}

/* ============================================================================
 * Top Navigation Bar
 * ============================================================================ */
.topbar{
  background:var(--theme-blue);
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:0.25rem;
  padding:0 0.25rem;
  position:sticky;
  top:0;
  z-index:20;
}

.nav-left,
.nav-right{
  display:flex;
  align-items:center;
}

.nav-left{ gap:0.25rem }
.nav-right{ margin-left:auto; gap:0.25rem }

/* Topbar tabs */
.tab{
  display:inline-block;
  padding:0.6rem 1rem;
  text-decoration:none;
  color:var(--ink);
  font-weight:600;
  user-select:none;
  border-radius:10px;
  transition:background .15s ease, box-shadow .15s ease;
}

.tab:hover{ background:var(--theme-blue-dark) }
.tab:focus-visible{ outline:none; box-shadow:var(--focus-ring) }
.tab.active{ background:var(--theme-blue-light); color:#fff }

/* ============================================================================
 * Layout: Sidebar + Main Content
 * ============================================================================ */
.layout{
  display:flex;
  flex:1 1 auto;
  min-height:0; /* Required to allow inner scrolling */
}

/* ============================================================================
 * Left Sidebar Navigation
 * ============================================================================ */
.sidenav{
  flex:0 0 var(--sidenav-width);
  width:var(--sidenav-width);
  min-width:var(--sidenav-width);
  max-width:var(--sidenav-width);

  /* Fallback background for older browsers */
  background:#253a48;
  /* Preferred background using color-mix */
  background:color-mix(in srgb, var(--panel) 75%, #f5f3f3 25%);

  color:#fff;
  padding:10px 0;
  overflow:hidden; /* Prevent horizontal expansion */
}

.sidenav-list{
  list-style:none;
  margin:0;
  padding:6px 8px;
}

.sidenav-link{
  display:block;
  padding:12px 14px;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  font-weight:100;
  opacity:.95;

  /* Prevent long labels from breaking layout */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sidenav-link:hover{ background:rgba(255,255,255,.12) }
.sidenav-link:focus-visible{ outline:none; box-shadow:var(--focus-ring) }

.sidenav-link.active{
  background:rgba(255,255,255,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* ============================================================================
 * Main Content Area
 * ============================================================================ */
.main{
  flex:1 1 auto;
  min-width:0;
  padding:0px 5px 0px;   /* Standard page padding */
  color:var(--ink-dark);
}

/* Default links inside main content */
.main a{
  color:var(--theme-blue);
  text-decoration:underline;
}

.main a:hover{ opacity:.9 }
.main a:focus-visible{ outline:none; box-shadow:var(--focus-ring) }

/* ============================================================================
 * Footer
 * ============================================================================ */
.footer{
  background:var(--theme-blue);
  color:var(--ink);
  text-align:center;
  padding:0.63rem;
  border-bottom:3px solid var(--brand-gold);
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  font-size:0.475rem; /* Reduced for compact footer */
}

/* ============================================================================
 * Utilities
 * ============================================================================ */
.container{ width:100%; margin:0 auto }

.wrap{
  max-width:1500px;
  margin:0.2rem auto;
  padding:0 1rem 1.25rem;
}

.hidden{ display:none !important }

/* ============================================================================
 * Card Component
 * ============================================================================ */
.card{
  background:#f5f7f8;
  border:1px solid #d9e2ea;
  border-radius:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  color:#0b1f33;
}

.pad{ padding:1rem }

/* ============================================================================
 * Tables
 * ============================================================================ */
.table{
  width:100%;
  border-collapse:collapse;
}

.table th,
.table td{
  padding:.65rem .75rem;
  border-bottom:1px solid #d9e2ea;
  text-align:left;
  font-size:.94rem;
}

.table thead th{
  position:sticky;
  top:0;
  background:#eef4fa;
  z-index:1;
}

.table tr:hover{ background:#f7fbff }

/* ============================================================================
 * Buttons
 * ============================================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem .9rem;
  border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  font-weight:600;
}

.btn:focus-visible{ outline:none; box-shadow:var(--focus-ring) }

.btn-primary{ background:var(--theme-blue); color:#fff }
.btn-primary:hover{ filter:brightness(.95) }

.btn-ghost{
  background:transparent;
  color:var(--theme-blue);
  border-color:var(--theme-blue);
}

.btn-ghost:hover{ background:rgba(15,76,141,.08) }

/* ============================================================================
 * Form Elements
 * ============================================================================ */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea{
  width:100%;
  padding:.7rem .8rem;
  border:1px solid #d9e2ea;
  border-radius:10px;
  color:#0b1f33;
  background:#fff;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

/* ============================================================================
 * Responsive Adjustments
 * ============================================================================ */
@media (max-width: 640px){
  .layout{ flex-direction:column }

  .sidenav{
    width:auto;
    max-width:none;
    border-right:none;
    border-bottom:2px solid rgba(0,0,0,.25);
  }

  .sidenav-list{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
}

/* ============================================================================
 * Print Styles
 * ============================================================================ */
@media print{
  .topbar,
  .sidenav,
  .footer{ display:none !important }

  .main{ padding:0 }
}

/* ============================================================================
 * Global Button Theme Overrides
 * ============================================================================ */
:root{
  --btn-primary-bg: var(--theme-blue, #0f4c8d);
  --btn-primary-tx: #ffffff;
  --btn-clear-bg:#6b7a8b;
  --btn-clear-tx:#ffffff;
}

/* Remove underline from anchor buttons */
.btn, .btn:link, .btn:visited,
.btn-ghost, .btn-ghost:link, .btn-ghost:visited{
  text-decoration:none !important;
}

/* Primary button */
button.btn,
 a.btn,
 input[type="button"].btn,
 input[type="submit"].btn{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:10px;
  font-size:.95rem;
  font-weight:300;
  letter-spacing:.01em;
  color:var(--btn-primary-tx);
  background:var(--btn-primary-bg);
  border:none;
  cursor:pointer;
  user-select:none;
  transition:transform .04s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.18) inset;
}

button.btn:hover,
 a.btn:hover,
 input.btn:hover{ filter:brightness(1.02) }

button.btn:active,
 a.btn:active,
 input.btn:active{
  transform:translateY(1px);
  box-shadow:0 0 0 rgba(0,0,0,0), 0 2px 0 rgba(0,0,0,.08) inset;
}

button.btn:focus-visible,
 a.btn:focus-visible,
 input.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(15,76,141,.28);
}

/* Secondary (ghost / clear) button */
button.btn-ghost,
 a.btn-ghost{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:10px;
  font-size:.95rem;
  font-weight:300;
  letter-spacing:.01em;
  color:var(--btn-clear-tx);
  background:var(--btn-clear-bg);
  border:none;
  cursor:pointer;
  user-select:none;
  transition:transform .04s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.12) inset;
}

button.btn-ghost:hover,
 a.btn-ghost:hover{ filter:brightness(1.02) }

button.btn-ghost:active,
 a.btn-ghost:active{
  transform:translateY(1px);
  box-shadow:0 0 0 rgba(0,0,0,0), 0 2px 0 rgba(0,0,0,.08) inset;
}

button.btn-ghost:focus-visible,
 a.btn-ghost:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(107,122,139,.28);
}