/* =====================
   Design variables
===================== */
:root{
  --max-width:2000px;
  --accent:#2563eb;
  --accent-soft:#eef4ff;
  --danger:#ef4444;
  --text:#0f172a;
  --muted:#64748b;
  --surface:#ffffff;
  --border:#e5e7eb;
  --bg:#f4f7fb;
  --radius:12px;
}

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

html,body{ height:auto; width:100%; }

body{
  margin:0;
  padding:18px;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  width:100%;
}

/* =====================
   Layout
===================== */
.container{
  max-width:var(--max-width);
  width:100%;
  margin:20px auto;
  background:transparent;
  padding-left:12px;
  padding-right:12px;
}

.card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
  margin-bottom:16px;
}

/* =====================
   Sidebar
===================== */
.app-layout{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

/* Make the main container inside app-layout flexible so it fills remaining space
   beside the fixed-width sidebar. This prevents the table from becoming a slim
   column on wide viewports. */
.app-layout > .container { flex: 1 1 auto; max-width: none; }

.sidebar{
  width:220px;
  background:linear-gradient(180deg,#0b2b5a,#0a3f7a);
  color:#fff;
  border-radius:14px;
  padding:14px;
  height:calc(100vh - 48px);
  position:sticky;
  top:20px;
}

.sidebar h4{
  margin:8px 0 14px;
  font-size:1rem;
}

.sidebar a{
  display:block;
  color:#dbeafe;
  padding:9px 12px;
  border-radius:8px;
  text-decoration:none;
  margin-bottom:6px;
  font-weight:500;
}

.sidebar a:hover,
.sidebar a.active{
  background:rgba(255,255,255,.15);
  color:#fff;
}

/* =====================
   Topbar
===================== */
.topbar{
  /* Stick the topbar below the page padding so it remains visible while scrolling */
  position:sticky;
  top:18px; /* match body padding to avoid hiding under page padding */
  z-index:9999; /* ensure it stays above other elements when fixed */
  background:#fff;
  border-radius:14px;
  padding:12px 14px;
  border:1px solid var(--border);
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}

.bulk-toolbar{
  margin-left:auto;
  display:flex;
  gap:4px;
  align-items:center;
}

/* Stack export/import vertically and push file chooser to the right */
.bulk-vertical{ display:flex; flex-direction:column; gap:4px; }
.bulk-toolbar > .inline-file, .bulk-toolbar input.inline-file { margin-left: auto; }

/* =====================
   Headings
===================== */
h2{
  margin:0 0 4px;
  text-align:center;
  font-weight:700;
}

/* =====================
   Inputs
===================== */
input[type="text"],
input[type="number"],
input[type="file"],
textarea{
  width:180px;
  border:1px solid var(--border);
  border-radius:5px;
  padding:5px 5px;
  font-size:1rem;
  background:#fff;
}

input:focus,
textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* =====================
   Buttons
===================== */
button,
.btn{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  border:0;
  padding:8px 14px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
}

button:hover,
.btn:hover{
  filter:brightness(1.05);
}

.btn-outline{
  background:#fff;
  color:var(--accent);
  border:1px solid var(--border);
}

.btn-danger{
  background:var(--danger);
}

/* =====================
   Scanner
===================== */
.scan-area{
  text-align:center;
  background:linear-gradient(135deg,#eef4ff,#ffffff);
  border-radius:14px;
  padding:18px;
}
/* 
.scan-input{
  font-size:1.15rem;
  padding:12px 14px;
  max-width:420px;
  margin:10px auto;
}
*/
.scan-input {
    font-size: 1.2rem;
    padding: 8px 8px;
    max-width: 420px;
    margin: 5px auto;
}


/* =====================
   Table
===================== */
.table-wrap{
  overflow-x:auto;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px;
  font-size:0.95rem;
}

/* Column sizing for main inventory table to avoid large left gap and prevent wrapping
   between the checkbox and image. We use nth-child selectors matching the column
   order in inventory.php: 1=checkbox, 2=ID, 3=Attēls, 4=Modelis, ... */
table thead th:first-child,
table tbody td:first-child { padding-left:8px; padding-right:8px; text-align:left; }
table thead th:nth-child(2),
table tbody td:nth-child(2) { width:200px; text-align:center; }

/* Keep model column on a single line; ellipsize if too long */
table thead th:nth-child(4),
table tbody td:nth-child(4) {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:280px;
}
/* Ensure images don't add extra margin */
.thumb{ display:block; margin:0 auto; }

thead th{
  text-align:center;
  font-weight:700;
  color:var(--muted);
  padding:10px 12px;
  /* Keep table headers visible when scrolling; top is set dynamically via JS */
  position:sticky;
  background:var(--surface);
  z-index:80;
}

/* Sortable column header helpers */
.sortable a{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.sortable a:hover{ text-decoration:underline; }
.sort-indicator{ font-size:0.85rem; color:var(--muted); }

tbody tr{
  background:#fff;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
}

td{
  padding:10px 12px;
  vertical-align:middle;
}

td:first-child{
  border-radius:10px 0 0 10px;
}

td:last-child{
  border-radius:0 10px 10px 0;
}

/* =====================
   Groups
===================== */
.group-row td{
  background:var(--accent-soft);
  font-weight:700;
  box-shadow:none;
}
/* Make group header content align to the left edge (match checkbox column start) */
.group-row td { text-align:left; padding-left:0; }
/* Use an inner flex container so header content lines up with row content without
  turning the TD into a flex container (which breaks table layout). */
.group-header-inner { display:flex; align-items:center; gap:12px; padding-left:12px; justify-content:flex-start; }

/* Group toggle and header helpers (moved from inline styles in inventory.php) */
.group-toggle {
  display:inline-block;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  border-radius:6px;
  border:1px solid #b6d4ff;
  background:#fff;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  color:#0d6efd; /* blue chevron for visibility */
  margin-right:8px;
  vertical-align:middle;
}
.group-toggle:hover {
  box-shadow:0 1px 3px rgba(13,110,253,0.12);
}
.group-toggle[aria-expanded="false"] { background:#f7f7f9; }
.group-item { transition: all .12s ease-in-out; }

/* Keep default table layout; use inner wrapper to prevent wrapping/overflow */
.group-header-inner { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.group-title { display:inline-block; vertical-align:middle; max-width:70%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.group-count { display:inline-block; margin-left:10px; color:#666; vertical-align:middle; }

/* =====================
   Images
===================== */
.thumb{
  max-width:80px;
  max-height:60px;
  border-radius:8px;
  border:1px solid var(--border);
}

/* =====================
   Thumbnail hover zoom (inventory images)
===================== */
.thumb{
  transition: transform 160ms ease, box-shadow 160ms ease;
  transform-origin: center center;
  display: inline-block;
  vertical-align: middle;
  /* Make the image itself the hover target even when it grows/shifts */
  pointer-events: auto;
}

/*
  Table layouts often have overflow/painting quirks that can cause hover-zoom to
  flicker (mouseenter/mouseleave fires rapidly) when the element grows beyond
  its cell. Make sure table cell/row overflow doesn't clip the enlarged image.
*/
table, tbody, tr, td { overflow: visible; }

/* Keep a positioning context so the enlarged thumbnail can overlay */
td { position: relative; }

/* Enlarge on hover/focus (keyboard accessible) */
.thumb:hover,
.thumb:focus{
  transform: scale(3.5);
  z-index: 20000;
  position: relative;
  display: inline-block;
  box-shadow: 0 14px 40px rgba(2,6,23,0.25);
}

/* Optional: avoid the enlarged image stealing hover from itself on some browsers */
.thumb { will-change: transform; }

/* =====================
   Pagination
===================== */
.pagination{
  margin-top:14px;
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}

.pagination a,
.pagination span{
  padding:7px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  text-decoration:none;
  color:var(--accent);
  font-weight:500;
}

.pagination .current{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* =====================
   Modal
===================== */
/* Modal/backdrop stacking: ensure the modal overlays the fixed site header
   which uses a very large z-index. We set backdrop/modal z-indexes above the
   header so the dialog is always visible centered in the viewport. */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.45);
  display:none;
  align-items:center;
  justify-content:center;
  /* Must be above the site header (site-header uses z-index:9999) */
  z-index:10000 !important;
  pointer-events:auto;
}

.modal{
  
  border-radius:14px;
  padding:18px;
  /* allow the modal to size to its content but never exceed viewport */
  
  box-sizing:border-box;
  /* Put the modal one level above the backdrop */
  z-index:10001 !important; /* ensure modal is above backdrop and header */
  pointer-events:auto;
}

/* Keep modal height within viewport and allow internal scrolling so very tall content
   doesn't overflow the backdrop or push other layout out */
.modal{
  max-height: calc(100vh - 80px);
  overflow: auto;
}

/* CSV import preview: keep the table inside a scrollable container and force wrapping
   so long cells don't push the table outside the modal. */
.preview-scroll{
  max-width:100%;
  /* Allow both horizontal and vertical scrolling when preview is large */
  overflow-x:auto;
  overflow-y:auto;
  /* limit preview height to a portion of the viewport so modal stays usable */
  max-height: 50vh;
  margin-top:10px;
}
.preview-table{
  width:100%;
  max-width:100%;
  border-collapse:separate;
  table-layout:fixed; /* force cells to respect available width and wrap */
}
.preview-table{ min-width: 0; }
.preview-table th,

/* =====================
   Modal fallback (explicit rules to ensure centering and backdrop when Bootstrap is missing/overridden)
===================== */
.modal {
  position: fixed !important;
  
  /* keep this higher than the site header */
  z-index: 10001 !important;
  
  align-items: center;
  justify-content: center;
  /* container is transparent; visual surface lives in .modal-content */
}
.modal.show { display: flex !important; }
.modal .modal-dialog { margin: 0; max-width: 90%; width: auto; }
.modal .modal-content { background:#fff; padding:18px; max-height: 90vh; overflow: auto; border-radius: 8px; box-shadow:0 10px 30px rgba(15,23,42,.08); }
/* Show the backdrop only when .show is applied (matches Bootstrap behavior) */
.modal-backdrop.show { display: flex !important; }

/* =====================
   Site header + submenu
   Moved from _site_header.php and _submenu_inner.php
===================== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 12px; border-bottom:1px solid #eee; background:#fff;
  z-index:9999; box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.site-header .header-left{ display:flex; align-items:center; gap:12px; }
.site-header .header-left img{ height:48px; display:block; }
.site-header .header-title{ display:flex; flex-direction:column; }
.site-header .lang-links{ display:flex; align-items:center; gap:8px; margin-left:12px; }
.site-header .top-search{ flex:1; display:flex; justify-content:center; align-items:center; }
.site-header .top-search .topbar-search{ display:flex; gap:6px; align-items:center; max-width:640px; width:100%; }
.site-header .actions{ display:flex; gap:8px; align-items:center; }
.site-header .btn-primary, .site-header .btn-secondary, .site-header .btn-outline{ text-decoration:none; }

.submenu-inner {
    background: rgb(199, 213, 249);
    border-bottom: 1px solid rgba(15, 52, 150, 0.08);
    padding: 18px 15px;
    display: flex;
    gap: 10px;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 998;
    font-size: 16px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
/*.submenu-inner { background: rgb(199, 213, 249); border-bottom:1px solid rgba(15,52,150,0.08); padding:18px 15px; display:flex; gap:10px; align-items:center; position:fixed; top: 80px;; left:0; right:0; z-index:998; font-size:16px; }
*/
.submenu-inner a { color:#1740b6; text-decoration:none; padding:6px 8px; border-radius:6px; font-weight:600; display:inline-flex; gap:8px; align-items:center; }
.submenu-inner a .sub-icon { width:18px; height:18px; display:inline-block; flex:0 0 18px; }
.submenu-inner a.active { background:#e9f0ff; color:#0b66ff; box-shadow:0 1px 0 rgba(11,102,255,0.06); }
@media (max-width:600px) { .submenu-inner { overflow:auto; white-space:nowrap; } .submenu-inner a { display:inline-flex; } }

.preview-table td{
  word-break:break-word;
  white-space:normal; /* allow wrapping inside cells */
  padding:8px 10px;
  overflow-wrap:anywhere; /* aggressive wrapping for long tokens */
  overflow:hidden;
}

/* Center preview table and its cell contents for better readability in the modal */
.modal .preview-table { margin: 0 auto; }
.modal .preview-table th,
.modal .preview-table td { text-align: center; }

/* =====================
   Authentication / Forms polish
   ===================== */
.auth-row{
  display:flex;
  gap:24px;
  align-items:flex-start;
  justify-content:center;
  margin: 6px 0 18px;
}
.auth-card{
  background:var(--surface);
  border-radius:12px;
  padding:18px;
  box-shadow:0 8px 24px rgba(2,6,23,0.06);
  width:100%;
  max-width:460px;
}
.auth-card h3{ margin-top:0; }
.auth-row > .auth-card{ flex: 1 1 420px; }

/* Button variants used in templates */
.btn-primary{ background:linear-gradient(135deg,var(--accent),#1d4ed8); color:#fff; border:0; padding:8px 14px; border-radius:10px; font-weight:600; cursor:pointer; }
.btn-primary:hover{ filter:brightness(1.03); }
.btn-success{ background:linear-gradient(135deg,#10b981,#059669); color:#fff; border:0; padding:8px 14px; border-radius:10px; font-weight:600; cursor:pointer; }

/* Inputs inside auth forms */
.auth-card input[type="text"], .auth-card input[type="password"], .auth-card input[type="email"]{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border); margin:6px 0 12px; }
.auth-card label{ display:block; font-weight:700; margin-top:6px; }

/* Adjust logo sizes for the nicer header */
.logo-login{ max-width:300px; height:auto; display:block; margin: 0 auto 10px; }
.logo-top-left{ height:40px; width:auto; display:block; margin-right:12px; }

@media (min-width:900px){
  .auth-row{ flex-wrap:nowrap; }
}
@media (max-width:899px){
  .auth-row{ flex-direction:column; align-items:center; }
  .auth-card{ max-width:560px; }
}


.modal-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

/* =====================
   Mobile
===================== */
@media (max-width:900px){
  .sidebar{ display:none; }
}

@media (max-width:420px){
  /* Mobile small: convert table rows into stacked cards using data-labels */
  table thead{ display:none; }
  table, tbody, tr, td{ display:block; width:100%; }
  tr{
    padding:12px;
    border-radius:12px;
    margin-bottom:12px;
    background:#fff;
    box-shadow:0 6px 18px rgba(2,6,23,0.06);
    border:1px solid var(--border);
  }
  td{
    display:flex;
    justify-content:space-between;
    padding:6px 8px;
    align-items:center;
    gap:8px;
  }
  td::before{ content:attr(data-label); font-weight:700; color:var(--muted); margin-right:8px; flex:0 0 40%; }
  /* Make long values wrap nicely */
  td > * { overflow-wrap:anywhere; }
}

/* vCard-style list for small screens: a nicer card layout instead of raw table rows */
@media (max-width:500px){
  /* Use the same card layout for slightly larger mobile devices */
  table thead{ display:none; }
  table, tbody, tr, td{ display:block; width:auto; }
  tr{
    padding:14px;
    border-radius:12px;
    margin-bottom:14px;
    background:#fff;
    box-shadow:0 8px 22px rgba(2,6,23,0.06);
    border:1px solid var(--border);
  }
  td{ display:flex; justify-content:space-between; padding:8px 10px; align-items:center; gap:10px; }
  td::before{ content:attr(data-label); font-weight:700; color:var(--muted); margin-right:8px; flex:0 0 38%; }
  td > * { overflow-wrap:anywhere; }
  /* Improve action buttons layout */
  td:last-child{ display:flex; gap:8px; justify-content:flex-end; }
}

/* Logo styles */
.logo-login { display:block; margin: 0 auto 16px; max-width:220px; height:auto; }
.logo-top-left { height:36px; width:auto; display:block; margin-right:12px; }

.hidden-file-input { position: absolute; left: -9999px; }
.file-btn { display:inline-block; padding:6px 10px; border-radius:6px; background:var(--accent); color:#fff; border:0; cursor:pointer; font-size:0.95rem; }
.file-btn.secondary { background:#6b7280; }
.file-name { margin-left:8px; font-size:0.9rem; color:var(--muted); }

/* Toast used for quick feedback (scan/CSV results) */
#toast{
  display:none; /* hidden by default */
  position:fixed;
  right:18px;
  top:86px; /* below sticky topbar */
  background:rgba(0,0,0,0.8);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  z-index:20000;
  box-shadow:0 8px 24px rgba(2,6,23,0.2);
  font-weight:600;
}
#toast.toast-success{ background:linear-gradient(135deg,#10b981,#059669); color:#fff; }

/* Error modal styling: red, centered, readable */
.modal.error-modal{
  background: linear-gradient(180deg,#b91c1c,#ef4444);
  color: #fff;
  border: 0;
  max-width: 720px;
}
.modal.error-modal .modal-actions{ justify-content:center; }
.modal.error-modal ul{ margin:0; padding-left:18px; }
.modal.error-modal li{ color:#fff; margin-bottom:6px; }

/* If something (inline JS styles) forces a light background, keep text readable */
.modal.error-modal[style*="background: white"],
.modal.error-modal[style*="background:white"],
.modal.error-modal[style*="background-color: white"],
.modal.error-modal[style*="background-color:white"]{
  color:#0f172a !important;
}
.modal.error-modal[style*="background: white"] li,
.modal.error-modal[style*="background:white"] li,
.modal.error-modal[style*="background-color: white"] li,
.modal.error-modal[style*="background-color:white"] li{
  color:#0f172a !important;
}

/* Camera scanner overlay and detection animation */
.camera-overlay{
  position:absolute;
  inset:0; /* cover video container */
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none; /* allow clicks through */
}
.camera-target{
  width:80%;
  max-width:360px;
  aspect-ratio: 16/9;
  border-radius:10px;
  border: 2px dashed rgba(255,255,255,0.85);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.25) inset;
  transition: transform .18s ease, box-shadow .2s ease, border-color .18s ease;
  transform: scale(1);
}
.camera-target.detected{
  transform: scale(0.92);
  border-color: rgba(16,185,129,0.95); /* green */
  box-shadow: 0 0 18px rgba(16,185,129,0.9), 0 0 0 6px rgba(16,185,129,0.12) inset;
}

@media (max-width:420px){
  .camera-target{ width:100%; }
}

/* =====================
   Mobile table full-width fixes
   ===================== */
@media (max-width:600px){
  /* ensure container and table wrapper don't constrain width on small screens */
  .container, .app-layout, .table-wrap { max-width:100% !important; width:100% !important; padding-left:8px; padding-right:8px; }

  /* force stacked table card layout to occupy full viewport width */
  table, tbody, tr, td { display:block !important; width:100% !important; max-width:100% !important; box-sizing:border-box; }
  table { width:100% !important; max-width:100% !important; }

  /* reset desktop fixed column widths that conflict with mobile card layout */
  table thead th:first-child, table tbody td:first-child,
  table thead th:nth-child(2), table tbody td:nth-child(2),
  table thead th:nth-child(4), table tbody td:nth-child(4) {
    width: auto !important;
    max-width: none !important;
    white-space: normal !important;
  }
}