/* ═══════════════════════════════════════════════════════════════════════════
   TB-RESPONSIVE.CSS — All responsive / @media rules for TenderBoard Admin
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nav Bar ── */
@media (max-width: 860px) {
  .nav-items { display: none; }
  .nav-hamburger { display: flex; }
  .mobile-nav-drawer { display: block; }
  .nav-divider { display: none; }
}

/* ── Table Columns ── */
@media (max-width: 1023px) {
  table#tenderTable th:nth-child(5), table#tenderTable td:nth-child(5),
  table#tenderTable th:nth-child(7), table#tenderTable td:nth-child(7) { display: none; }
}

/* ── Table Card Layout (mobile) ── */
@media (max-width: 767px) {
  table#tenderTable, table#tenderTable thead, table#tenderTable tbody,
  table#tenderTable tr, table#tenderTable th, table#tenderTable td,
  table#listTable, table#listTable thead, table#listTable tbody,
  table#listTable tr, table#listTable th, table#listTable td,
  table.custom-table, table.custom-table thead, table.custom-table tbody,
  table.custom-table tr, table.custom-table th, table.custom-table td { display: block !important; width: 100% !important; }
  
  .table-card { border: none; background-color: transparent; }
  table#tenderTable thead tr, table#listTable thead tr, table.custom-table thead tr { display: none !important; }
  .table-footer { border-top-right-radius: 12px; border-top-left-radius: 12px; border-top: none !important; }
  
  table#tenderTable tbody tr, table#listTable tbody tr, table.custom-table tbody tr {
    border: 1px solid var(--tb-border) !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    overflow: hidden;
  }
  table#tenderTable tbody tr:nth-child(odd), table#listTable tbody tr:nth-child(odd), table.custom-table tbody tr:nth-child(odd) { background: var(--tb-row-odd) !important; }
  table#tenderTable tbody tr:nth-child(even), table#listTable tbody tr:nth-child(even), table.custom-table tbody tr:nth-child(even) { background: var(--tb-row-even) !important; }
  table#tenderTable tbody tr:hover, table#listTable tbody tr:hover, table.custom-table tbody tr:hover { background: #edf7f3 !important; }

  table#tenderTable tbody td, table#listTable tbody td, table.custom-table tbody td {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 14px !important;
    border-bottom: 1px solid var(--tb-border-light) !important;
    font-size: 13px;
  }
  table#tenderTable tbody td:last-child, table#listTable tbody td:last-child, table.custom-table tbody td:last-child { border-bottom: none !important; }

  table#tenderTable tbody td::before, table#listTable tbody td::before, table.custom-table tbody td::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--tb-muted-light);
    min-width: 80px;
    padding-top: 3px;
    flex-shrink: 0;
  }

  table#tenderTable tbody td:nth-child(1), table#listTable tbody td:nth-child(1), table.custom-table tbody td:nth-child(1) {
    padding: 8px 14px 6px !important;
    border-bottom: 2px solid var(--tb-border) !important;
    background: transparent !important;
    align-items: center;
    gap: 8px;
  }
  table#tenderTable tbody td:nth-child(1)::before, table#listTable tbody td:nth-child(1)::before, table.custom-table tbody td:nth-child(1)::before { display: none; }

  table#tenderTable tbody td:nth-child(2), table#listTable tbody td:nth-child(2), table.custom-table tbody td:nth-child(2) {
    flex-direction: column;
    padding: 10px 14px 8px !important;
    border-bottom: 2px solid var(--tb-border-light) !important;
    background: transparent !important;
  }

}

/* ═══════════════════════════ LAYOUT RESPONSIVE ═══════════════════════════ */
@media (max-width: 1199.98px) {
  /* Sidebar hidden by default at tablet widths — toggled via JS */
  .filter-sidebar { transform: translateX(calc(-1 * var(--filter-w))); }
  .filter-sidebar.mobile-open { transform: translateX(0); box-shadow: 4px 0 30px rgba(0,0,0,.12); }
  /* No !important — JS must be able to toggle margin for the squeeze animation */
  .main-content { margin-left: var(--icon-rail-w); }
  .main-content.sidebar-open { margin-left: calc(var(--icon-rail-w) + var(--filter-w)); }
  .page-body { margin-left: var(--icon-rail-w); }
}

@media (max-width: 767.98px) {
  .icon-rail { display: none; }
  .filter-sidebar { left: 0; }
  /* !important on mobile — sidebar is overlay only, never pushes content */
  .main-content { margin-left: 0 !important; padding: 14px 12px; }
  .page-body { margin-left: 0 !important; padding: 14px 12px; }
  .toolbar-right .sort-select, .toolbar-right .toggle-wrap { display: none; }
}

/* ── Side Canvas – Responsive ── */

/* 1441px – 1920px */
@media (min-width: 1441px) and (max-width: 1920px) {
  .tender-view-side-canvas { width: 1176px; }
  .tender-details-header-area { padding: 24px; }
  .tender-details-body-area { padding: 24px; }
  .tender-details-body-content { gap: 48px; grid-template-columns: auto 400px; }
  .supplier-details-header-area { padding: 24px 24px 40px; }
  .supplier-details-body-top-part { padding: 24px; }
  .supplier-details-body-content { padding: 24px; grid-template-columns: auto 400px; gap: 48px; }
  .supplier-details-body-table-area { padding: 24px; }
  .supplier-details-tab-item { padding: 10px 18px; }
  .buyer-details-tab-item { padding: 10px 18px; }
  .tender-details-content-body .tender-details-section { padding: 32px; }
  .tender-details-content-body .tender-details-body-content { gap: 100px; grid-template-columns: auto 410px; }
  .supplier-details-content-body .supplier-details-body-content { gap: 100px; grid-template-columns: auto 410px; }
  .supplier-details-content-body .supplier-details-header-area { padding: 24px 32px 40px; }
  .supplier-details-content-body .supplier-details-tab-item { padding: 10px 32px !important; }
  .supplier-details-content-body .supplier-summary-section { padding: 0 32px !important; }
  .supplier-details-content-body .supplier-details-body-top-part { padding: 24px 0; }
  .supplier-details-content-body .supplier-details-body-table-area { padding: 32px; }
  .supplier-details-content-body .buyer-details-tab-item { padding: 10px 32px; }
  .supplier-details-content-body .buyer-summary-section { padding: 0 32px !important; }
  .tender-view-side-canvas .supplier-details-body-table-area .dt-layout-table { height: 360px; overflow-y: scroll; scrollbar-width: thin; }
}

/* 1201px – 1440px */
@media (min-width: 1201px) and (max-width: 1440px) {
  .tender-view-side-canvas { width: 1176px; }
  .tender-details-main-container { margin-left: 32px; }
  .tender-details-header-area { padding: 24px; }
  .tender-details-body-area { padding: 24px; }
  .tender-details-body-content { gap: 48px; grid-template-columns: auto 400px; }
  .supplier-details-header-area { padding: 24px 24px 40px; }
  .supplier-details-body-top-part { padding: 24px; }
  .supplier-details-body-content { padding: 24px; grid-template-columns: auto 400px; gap: 48px; }
  .supplier-details-body-table-area { padding: 24px; }
  .supplier-details-tab-item { padding: 10px 18px; }
  .buyer-details-tab-item { padding: 10px 18px; }
  .tender-details-content-body .tender-details-section { padding: 32px; }
  .tender-details-content-body .tender-details-body-content { gap: 100px; grid-template-columns: auto 410px; }
  .supplier-details-content-body .supplier-details-body-content { gap: 100px; grid-template-columns: auto 410px; }
  .supplier-details-content-body .supplier-details-header-area { padding: 24px 32px 40px; }
  .supplier-details-content-body .supplier-details-tab-item { padding: 10px 32px !important; }
  .supplier-details-content-body .supplier-summary-section { padding: 0 32px; }
  .supplier-details-content-body .supplier-details-body-top-part { padding: 24px 0; }
  .supplier-details-content-body .supplier-details-body-table-area { padding: 32px; }
  .supplier-details-content-body .buyer-details-tab-item { padding: 10px 32px !important; }
  .supplier-details-content-body .buyer-summary-section { padding: 0 32px; }
  .tender-view-side-canvas .supplier-details-body-table-area .dt-layout-table { height: 360px; overflow-y: scroll; scrollbar-width: thin; }
}

/* ≤ 1200px */
@media (max-width: 1199.98px) {
  .tender-view-side-canvas { width: 75%; }
  .tender-details-body-content { grid-template-columns: 1fr; gap: 24px; }
  .supplier-details-body-content { grid-template-columns: 1fr; gap: 24px; }
  .supplier-details-body-top-part { grid-template-columns: 1fr 1fr; }
}

/* ≤ 912px (mobile card layout) */
@media (max-width: 912px) {
  .tender-details-body-content { display: block; }
  .tender-view-side-canvas { width: 100%; }
  .tender-details-main-container { margin-left: 10px; }
  .tender-details-content-body .tender-details-section { padding: 15px; overflow-x: hidden; }
  .tender-details-header-area { display: block; }
  .tender-details-body-timeline-right-item { flex-direction: column; font-size: 14px; align-items: start; }
  .tender-details-body-timeline-item { grid-template-columns: 160px auto; }
  .tender-details-body-timeline-view-details-btn { margin-left: 0; }
  .tender-details-comment-time { display: none; }
  .tender-details-comment-area { grid-template-columns: 40px auto; }
  .tender-details-workflow-item { font-size: 14px; }
  .tender-details-header-area-left-part { width: 100%; }
  .tender-details-cpv-code-area .tender-details-cpv-code-item,
  .tender-details-comment-content,
  .tender-details-body-timeline-item { font-size: 14px; }
  .close-side-canvas { top: 0; left: 0; z-index: 9; min-width: 36px; min-height: 36px; display: flex; justify-content: center; }
  .tender-details-content-body .tender-details-body-content { gap: 10px; grid-template-columns: 1fr; }
  .tender-details-content-body .tender-details-body-content { position: relative; }
  .tender-details-body-right-content .tender-details-body-right-item:last-child { margin-bottom: 350px; }
  .tender-details-body-right-competitor-area:last-child { margin-bottom: 350px; }
  .tender-details-workflow-item .status.awarded,
  .tender-details-workflow-item .status.open { font-size: 14px; }
  .tender-details-comment-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: scroll;
    scrollbar-width: thin;
  }
  .tender-details-comment-time { justify-content: start; }
  .tender-details-section .ui-widget-header { max-width: 335px; overflow-x: scroll; overflow-y: hidden; margin: auto; padding-bottom: 10px; }
  .supplier-details-body-table-area { padding: 10px; }
  .supplier-details-content-body .supplier-details-body-content { padding: 10px; gap: 10px; grid-template-columns: 1fr; }
  .supplier-details-content-body .supplier-details-body-table-area { padding: 10px; }
  .supplier-details-content-body .supplier-details-header-area { padding: 15px; }
  .mobile-only {   display: block !important; }
}

/* ≤ 575px */
@media (max-width: 575.98px) {
  .tender-view-side-canvas { display: none; width: auto; }
  .tender-view-side-canvas.active-canvas { display: block; }
  .tender-view-side-canvas { width: 376px; }
  #tender-filter-side-canvas.tender-view-side-canvas { width: 380px; }
  .filter-canvas-content .col-12.d-flex.flex-column { width: 100%; }
  .filter-canvas-tab-area .filter-canvas-tab { display: block; }
  .filter-canvas-header-area { flex-direction: column; align-items: flex-start; gap: 15px; }
  .tender-lifecycle-item label { color: #151b28; font-size: 13px; }
  .tender-details-header-area { display: block; }
  .tender-details-content-body .tender-details-body-content { gap: 10px; grid-template-columns: 1fr; }
  .tender-details-premium-popup { position: relative; left: 0; bottom: 10px; height: auto; }
  .tender-details-body-right-content .tender-details-body-right-item:first-child .d-flex.align-items-center.gap-1.my-2 { display: block !important; }
  .tender-details-header-area-left-part { width: 100%; }
  .supplier-timeline-premium-popup { position: relative; left: 0; top: 0; }
  .tender-details-competitor-item { flex-direction: column; gap: 20px; }
  .tender-details-body-right-item { margin-bottom: 20px; }
  .tender-details-content-body .tender-details-section { padding: 20px; }
  .supplier-details-body-top-part { grid-template-columns: 1fr; }
  .supplier-details-header-area { flex-direction: column; padding: 20px; }
  .supplier-details-body-content { padding: 10px; grid-template-columns: 1fr; gap: 10px; }
  .supplier-details-body-top-part { padding: 10px; }
  .tender-details-body-top-part { grid-template-columns: 1fr; gap: 10px; }
  .close-side-canvas { left: 10px; border-radius: 50%; border: solid 1px #151b28; padding: 5px 10px; }
  .tender-details-cpv-code-area .tender-details-cpv-code-item,
  .tender-details-body-details-area { font-size: 12px; }
  .tender-details-main-container { margin-left: 0; }
  .tender-details-body-area { padding: 16px; }
  .tender-details-body-content { grid-template-columns: 1fr; gap: 16px; }
  .tender-details-body-timeline-item { grid-template-columns: 1fr; }
  .tender-details-workflow-item { grid-template-columns: 1fr; }
}

/* ── Page Title ── */
@media (max-width: 575.98px) {
  .page-title { font-size: 18px; }
}