/* ==========================================================================
   SPB Supplier Portal - Unified Responsive Stylesheet
   Author: ChatGPT (ANBUSARAN)
   Date: 2025-09-16
   Purpose: One CSS to rule phone, tablet, small laptop, and desktop.
   How to use:
     1) Remove page-level <style> blocks and custom inline styles where possible.
     2) Add: <link rel="stylesheet" href="css/responsive.css"> (or the correct path)
     3) Keep Bootstrap + DevExpress CDN links (they provide base components).
     4) JS code can stay as-is. Grid sizing, paddings, and layout are handled here.
   Notes:
     - Variables provide quick theme adjustments.
     - Media queries ensure fluid, readable grids across breakpoints.
   ========================================================================== */

/* ------------------------------
   0) CSS Variables (Theme)
   ------------------------------ */
:root{
  --brand: #4595FD;
  --brand-ink: #ffffff;
  --text: #212529;
  --muted: #777;
  --bg: #ffffff;
  --subnav-bg: #f9f9f9;
  --subnav-border: #ddd;
  --footer-bg: #002140;
  --drawer-shadow: 2px 0 8px rgba(0,0,0,.15);
  --shadow: 0 2px 4px rgba(0,0,0,.1);
  --radius: 10px;
  --pad-sm: 8px;
  --pad: 12px;
  --pad-lg: 16px;
  --header-h: 70px;
  --subnav-h: 44px;
  --z-header: 1000;
  --z-drawer: 2000;
}

/* ------------------------------
   1) Resets & Base
   ------------------------------ */
html, body{
  height: 100%;
}
*,
*::before,
*::after{
  box-sizing: border-box;
}
body{
  margin: 0;
  padding: 0;
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Utility helpers */
.hide{ display: none !important; }
.w-100{ width: 100% !important; }
.text-center{ text-align: center !important; }
.shadow{ box-shadow: var(--shadow); }
.rounded{ border-radius: var(--radius); }
.p-0{ padding: 0 !important; }
.p-1{ padding: var(--pad-sm) !important; }
.p-2{ padding: var(--pad) !important; }
.p-3{ padding: var(--pad-lg) !important; }
.mt-1{ margin-top: var(--pad-sm) !important; }
.mt-2{ margin-top: var(--pad) !important; }
.mt-3{ margin-top: var(--pad-lg) !important; }
.mb-1{ margin-bottom: var(--pad-sm) !important; }
.mb-2{ margin-bottom: var(--pad) !important; }
.mb-3{ margin-bottom: var(--pad-lg) !important; }

/* ------------------------------
   2) App Frame: Header, Subnav, Footer
   ------------------------------ */

/* Header */
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--brand);
  color: var(--brand-ink);
  height: var(--header-h);
  width: 100%;
  padding: 0 var(--pad-lg);
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-header);
  box-shadow: var(--shadow);
}
.header img{
  height: 54px;
  width: auto;
}
.header_content{
  flex: 1;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--pad);
}
.header-icons{
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-icons a{ color: var(--brand-ink); font-size: 20px; }
#userEmail{ color: var(--brand-ink); font-size: 14px; font-weight: 600; margin-top: 2px; }

/* Ensure content starts below header */
.wrapper{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
}

/* Subnav (sticky on desktop) */
.subnav{
  display: none; /* hidden on mobile by default */
}
@media (min-width: 768px){
  .subnav{
    display: flex;
    position: sticky;
    top: var(--header-h);
    left: 0;
    z-index: calc(var(--z-header) - 1);
    background: var(--subnav-bg);
    border-top: 1px solid var(--subnav-border);
    border-bottom: 1px solid var(--subnav-border);
    padding: 6px var(--pad-lg);
    gap: 18px;
    font-weight: 600;
    color: #333;
    justify-content: flex-start;
    align-items: center;
    min-height: var(--subnav-h);
  }
  .subnav a{
    color: #333;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 6px;
  }
  .subnav a:hover{
    color: var(--brand);
    text-decoration: none;
    background: #eef5ff;
  }
}

/* Footer */
.footer-bottom{
  background: var(--footer-bg);
  text-align: center;
  padding: 16px 0;
  color: #fff;
  font-size: 14px;
  margin-top: auto;
}

/* ------------------------------
   3) Drawer (Mobile Navigation)
   ------------------------------ */
.menu-icon{
  display: inline-flex;
  font-size: 24px;
  cursor: pointer;
  color: var(--brand-ink);
}
@media (min-width: 768px){
  .menu-icon{ display: none; }
}

.drawer{
  position: fixed;
  top: 0;
  left: -280px;
  height: 100%;
  width: 80vw;           /* fluid on small screens */
  max-width: 280px;      /* cap on larger phones */
  background: #fff;
  box-shadow: var(--drawer-shadow);
  z-index: var(--z-drawer);
  transition: left .3s ease-in-out;
  padding-top: var(--header-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.drawer.open{ left: 0; }
.drawer .menu-top{ padding-bottom: 10px; }
.drawer a{
  display: block;
  padding: 14px 20px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  font-weight: 600;
}
.drawer a:hover{ background: #f9f9f9; color: var(--brand); }
.drawer .submenu{ display: none; padding-left: 8px; }
.drawer .submenu a{ font-size: .95rem; font-weight: 500; border-bottom: none; padding: 10px 20px; }
.drawer .expandable.active + .submenu{ display: block; }
.drawer .logout-link{
  border-top: 1px solid #eee;
  margin-top: auto;
  text-align: center;
  padding: 16px;
}

/* ------------------------------
   4) Content Containers
   ------------------------------ */
#mainContent, #welcomeMessage{ flex: 1 0 auto; }
.content{
  max-width: 100%;
  margin: 0 auto;
  padding: 16px;
  text-align: left;
}
.rfq-container{
  margin-top: 6px;
  padding: 10px;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Classic links in menus */
.menu-link{ cursor: pointer; }

/* Sections used by popups or forms */
.editable-section{
  border-top: 1px solid #ccc;
  margin-top: 10px;
  padding-top: 10px;
}
.dx-popup-content .source-section{
  border-bottom: 1px solid #ccc;
  padding-bottom: 12px;
  margin-bottom: 20px;
}

/* ------------------------------
   5) DevExtreme Grid & Components
   ------------------------------ */

/* Base grid text sizing and wrapping */
.dx-datagrid{
  font-size: 14px;
  line-height: 1.35;
  word-wrap: break-word;
}
.dx-datagrid-rowsview .dx-row > td{
  vertical-align: middle;
}

/* Column sizing behaviors (works with JS options) */
.dx-datagrid, .dx-datagrid .dx-datagrid-headers, .dx-datagrid .dx-datagrid-rowsview{
  overflow: auto;
}

/* Cells with long text wrap nicely */
.dx-datagrid .dx-word-wrap, .wrap-cell{
  white-space: normal !important;
  word-break: break-word;
}

/* Toolbar spacing */
.dx-datagrid .dx-toolbar{
  padding: 6px var(--pad);
}

/* Column chooser popover */
.dx-overlay-wrapper .dx-popup-content{
  padding: var(--pad);
  font-size: 14px;
}

/* Editors inside grid/popup */
.dx-texteditor-input{
  font-size: 14px;
  line-height: 1.35;
}

/* Popups */
.dx-popup-content{
  padding: var(--pad);
}

/* Responsive grid font scaling */
@media (max-width: 575.98px){
  .dx-datagrid{ font-size: 12px; }
}

/* ------------------------------
   6) Unit Selector (if present)
   ------------------------------ */
.unit-selector{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px var(--pad-lg);
  font-weight: 700;
}
.unit-selector label{
  font-weight: 600;
  margin: 0 12px 0 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.unit-selector input[type="radio"]{ margin-right: 6px; }
@media (min-width: 768px){
  .subnav .unit-selector{ padding: 0; gap: 12px; }
}

/* ------------------------------
   7) Responsive Breakpoints
   ------------------------------ */

/* Phones (portrait & small landscape) */
@media (max-width: 575.98px){
  .header_content{ font-size: 1rem; }
  .content{ padding: 12px; }
  .footer-bottom{ font-size: 13px; }
}

/* Tablets & small laptops */
@media (min-width: 576px) and (max-width: 991.98px){
  .content{ padding: 16px; }
}

/* Large desktops */
@media (min-width: 1200px){
  .content{ max-width: 1400px; }
}

/* ------------------------------
   8) Spacing to avoid subnav overlap (desktop)
   Apply this class on <body> when subnav is present.
   ------------------------------ */
@media (min-width: 768px){
  .subnav-active #mainContent,
  .subnav-active #welcomeMessage{
    margin-top: var(--subnav-h);
  }
}

/* ------------------------------
   9) Optional Grid Wrapper Helpers
   ------------------------------ */
.grid-wrap, .grid-wrapper{
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--shadow);
}

/* ------------------------------
   10) Buttons (Bootstrap-friendly)
   ------------------------------ */
.btn{ font-weight: 600; }
.btn-success{ color: #fff; }
.btn-secondary{ color: #fff; }

/* ------------------------------
   11) Footer spacing for very short pages
   ------------------------------ */
.wrapper > *:last-child{ margin-bottom: 0; }