/* === Layout: sticky footer === */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
.page-main { flex: 1 0 auto; }
.app-footer { flex-shrink: 0; }

/* === Global background to make shadows visible === */
body{ background: #f6f8fc; }

/* === Typography tweaks === */
.big-title{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: clamp(22px, 3vw, 32px);
}
.login-sub{
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 600;
}

/* === Logo sizing (DOUBLE) === */
.logo{
  max-height: 112px;   /* desktop/tablet */
  max-width: 480px;
  height: auto;
  width: auto;
  object-fit: contain;
}
@media (max-width: 576px){
  .logo{ max-height: 104px; max-width: 360px; }
}

/* === 3D look (ALL sizes) === */
:root{
  --radius-lg: 18px;
  --radius-md: 12px;
  --border-col: #e5e7eb; /* slate-200 */
  --border-col-strong: #cbd5e1; /* slate-300 */
  --shadow-1: 0 1px 2px rgba(0,0,0,.05);
  --shadow-2: 0 10px 26px rgba(0,0,0,.10);
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,.06);
}

.card,
.modal-content{
  border: 1px solid var(--border-col) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1), var(--shadow-2) !important;
  background: #ffffff;
}

.card > .table-responsive,
.table-responsive{
  border: 1px solid var(--border-col) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1), var(--shadow-2) !important;
  background: #ffffff;
  overflow: hidden;
  margin-top: 4px;
}

.table{ background: #ffffff; }
.table thead th{
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-bottom-width: 2px;
  border-bottom-color: var(--border-col-strong) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.8);
}
.table.align-middle > :not(caption) > * > * {
  border-bottom-width: 2px;
  border-bottom-color: var(--border-col);
}
.table tbody tr:last-child td { border-bottom-width: 2px; }

/* Inputs & selects (3D) */
.form-control, .form-select, .form-check-input{
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-col) !important;
  box-shadow: var(--shadow-inset) !important;
  background: #fff;
}
.form-control:focus, .form-select:focus{
  box-shadow: var(--shadow-inset), 0 0 0 .2rem rgba(59,130,246,.15) !important;
  border-color: #93c5fd !important;
}

/* Buttons */
.btn{
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-col) !important;
  box-shadow: var(--shadow-1) !important;
  background: #fff;
}
.btn:hover{ box-shadow: var(--shadow-1), 0 8px 20px rgba(0,0,0,.10) !important; }
.btn.btn-primary{ background: #2563eb; color: #fff; border-color: #1d4ed8 !important; }
.btn.btn-primary:hover{ background: #1d4ed8; }

/* Quantity badges (FILLED colors) */
.badge-qty{
  display:inline-block;
  padding:2px 10px;
  font-size:12px;
  font-weight:700;
  border-radius:999px;
  border:1px solid transparent;
}
.badge-qty.low{ background:#ef4444; color:#ffffff; border-color:#ef4444; }   /* <5  red */
.badge-qty.mid{ background:#facc15; color:#111827; border-color:#fbbf24; }  /* <10 yellow */
.badge-qty.high{ background:#16a34a; color:#ffffff; border-color:#16a34a; } /* >10 green */

/* Centered columns */
th.text-center, td.text-center { text-align:center !important; }

/* Hover feel */
.table-hover tbody tr:hover { background:#f8fafc; }

/* Image in details */
.img-thumb { max-width: 100%; height: auto; border-radius:12px; border:1px solid #e2e8f0; }

/* Utility to hide on small screens */
.hide-sm{}
@media (min-width: 577px){
  .hide-sm{ display: inline !important; }
}

/* === Mobile column visibility (UPDATED to show actions) === */
@media (max-width: 576px){
  /* Shrink fonts/padding so everything fits */
  .responsive-table th,
  .responsive-table td{ font-size:12px; padding:6px 8px; }

  .responsive-table .col-idx,
  .responsive-table .col-category,
  .responsive-table .col-code,
  .responsive-table .col-qty,
  .responsive-table .col-updated{
    display: none;
  }

  /* Keep these VISIBLE on mobile */
  .responsive-table .col-brand,
  .responsive-table .col-model,
  .responsive-table .col-type,
  .responsive-table .col-price,
  .responsive-table .col-actions{
    display: table-cell;
    white-space: nowrap;
  }

  /* Hide "Izmeni" i "Obriši" linkove, ostavi "Detalji" */
  .responsive-table .hide-sm{ display: none !important; }
  .responsive-table a{ font-size:12px; }
}

/* === Footer === */
.app-footer{
  background: #ffffff;
  border-top: 1px solid var(--border-col);
  box-shadow: 0 -6px 18px rgba(0,0,0,.06);
  color: #64748b;
  font-weight: 700;
  letter-spacing: .4px;
}
.app-footer .inner{
  padding: 14px 0;
}

/* === PRICE: only show / RSD in header; hide RSD suffix in cells === */
.price-currency{display:none!important;}
.curr-label{font-weight:700;}

/* === Model underline by color === */
.model-ink{ text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 3px; }
.ink-none{ text-decoration: none; }
.ink-black{ text-decoration-color:#111827; }
.ink-white{ text-decoration-color:#e5e7eb; }
.ink-silver{ text-decoration-color:#9ca3af; }
.ink-gold{ text-decoration-color:#d4af37; }
.ink-blue{ text-decoration-color:#2563eb; }
.ink-green{ text-decoration-color:#16a34a; }
.ink-red{ text-decoration-color:#ef4444; }
.ink-purple{ text-decoration-color:#7c3aed; }
.ink-pink{ text-decoration-color:#ec4899; }
.ink-yellow{ text-decoration-color:#f59e0b; }
.ink-orange{ text-decoration-color:#f97316; }
.ink-gray{ text-decoration-color:#6b7280; }
.ink-graphite{ text-decoration-color:#374151; }
.ink-titan{ text-decoration-color:#6b7280; }

/* === Sticky table header (GAGI v14) === */
.table-sticky thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bs-body-bg, #fff);
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}
/* Scroll containers so sticky works smoothly */
.table-wrapper-scroll{ max-height: 70vh; overflow: auto; }
.table-responsive{ overflow: auto; }

/* === Mobile: hide export (Excel/PDF) together with filters === */
@media (max-width: 767.98px){
  .export-actions{ display: none !important; }
  body.filters-open .export-actions{ display: flex !important; }
}

/* === PAGE WIDTH FIX (wider frame) === */
:root{ --page-max: 1280px; } /* adjust to 1200–1440px if you like */

html, body { width: 100%; }

/* If Bootstrap containers are used, widen them */
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl{
  max-width: var(--page-max) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 16px !important;
}

/* Cover any custom outer wrappers too */
.app, .app-shell, .wrapper, .page-main, .content-wrap, .admin-panel{
  max-width: var(--page-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Cards/panels should use full column width */
.card, .modal-content{
  width: 100%;
  max-width: 100%;
}

/* Table responsiveness without looking like in an iframe */
.table-responsive{
  width: 100%;
  max-width: 100%;
}


/* === SINGLE-FRAME FIX: remove nested narrow containers & fixed widths === */

/* 1) If a .container is nested inside another .container (Bootstrap anti-pattern) */
.container .container,
.container .container-sm,
.container .container-md,
.container .container-lg,
.container .container-xl,
.container .container-xxl{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Force main panels/cards to span full width of their column */
.main, .main-panel, .admin-panel, .panel, .card, .content, .content > .card{
  max-width: none !important;
  width: 100% !important;
}

/* 3) Tables/forms/search areas shouldn't cap width */
.table-responsive, .dataTables_wrapper, .filter-bar, form{
  max-width: 100% !important;
  width: 100% !important;
}

/* 4) Ensure body/root doesn't have a hidden max-width somewhere */
html, body{
  max-width: none !important;
}

/* 5) Optional: slightly increase page max width */
:root{ --page-max: 1366px; }

/* === MOBILE FIT v7 — full 'ORIGINAL', centered 'Detalji', aligned columns === */
@media (max-width: 576px){
  /* Column distribution: Brand 18, Model 30, Type 16, Price 22, Actions 14 */
  .responsive-table .col-brand   { width: 18% !important; text-align: left !important; }
  .responsive-table .col-model   { width: 30% !important; min-width: 0 !important; max-width: 0 !important;
                                   overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .responsive-table .col-type    { width: 16% !important; text-align: center !important; }
  .responsive-table .col-price   { width: 22% !important; text-align: center !important; white-space: nowrap !important; }
  .responsive-table .col-actions { width: 14% !important; text-align: center !important; white-space: nowrap !important; }

  /* Ensure 'Original'/'OLED'/'InCell' shows fully in Type */
  .responsive-table td.col-type,
  .responsive-table th.col-type{
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  /* If you use badges for type, make them compact but readable */
  .responsive-table td.col-type .badge,
  .responsive-table td.col-type .tag,
  .responsive-table td.col-type .chip{
    font-size: 11px !important;
    padding: 2px 6px !important;
    line-height: 1.2 !important;
  }

  /* Center the 'Detalji' link under the type */
  .responsive-table td.col-type .mobile-details{
    display: block !important;
    margin-top: 2px !important;
    text-decoration: underline !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  /* Keep overall cells compact */
  .responsive-table th,
  .responsive-table td{
    font-size: 12px !important;
    padding: 6px 5px !important;
  }
  .responsive-table thead th{ font-size: 11.5px !important; }
}