/**
 * responsive.css — Mobile Responsive Foundation for InventoMan
 *
 * ALL rules are inside @media blocks to preserve the existing desktop layout.
 * Auto-loaded by the glob pattern in config/assets/default.js.
 *
 * Breakpoints:
 *   Mobile:  max-width: 768px
 *   Tablet:  max-width: 960px
 *   Desktop: min-width: 961px (no changes)
 */

/* ==========================================================================
   1. Utility Classes
   ========================================================================== */

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  .mobile-full-width {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

@media (min-width: 961px) {
  .show-mobile {
    display: none !important;
  }
}

/* ==========================================================================
   2. Touch Target Sizing
   ========================================================================== */

@media (max-width: 768px) {
  button,
  a,
  .md-button,
  input,
  select,
  textarea {
    min-height: 44px;
    min-width: 44px;
  }

  button + button,
  button + a,
  button + .md-button,
  a + button,
  a + a,
  a + .md-button,
  .md-button + button,
  .md-button + a,
  .md-button + .md-button {
    margin-top: 8px;
  }
}

/* ==========================================================================
   3. Form Input Overrides (16px prevents iOS auto-zoom)
   ========================================================================== */

@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select,
  .form-control {
    min-height: 44px;
    font-size: 16px !important;
  }

  md-input-container input,
  md-input-container textarea {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   4. md-autocomplete Full-Width
   ========================================================================== */

@media (max-width: 768px) {
  md-autocomplete {
    width: 100% !important;
  }

  .md-virtual-repeat-container.md-autocomplete-suggestions-container {
    width: 100vw !important;
    left: 0 !important;
  }
}

/* ==========================================================================
   5. md-dialog Full-Width
   ========================================================================== */

@media (max-width: 768px) {
  md-dialog {
    min-width: 95vw !important;
    max-width: 100vw !important;
    margin: 8px !important;
  }

  md-dialog.full-width-mobile {
    min-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .dialog-wrapper {
    width: 95vw !important;
    min-width: unset !important;
  }
}

/* ==========================================================================
   6. Table-to-Card Transform
   ========================================================================== */

@media (max-width: 768px) {
  .mobile-card-table {
    border-spacing: 0;
    width: 100% !important;
  }

  .mobile-card-table thead {
    display: none;
  }

  .mobile-card-table tbody {
    display: block;
    padding: 0 4px;
  }

  .mobile-card-table tbody tr {
    display: block;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 12px;
    background: #fff;
  }

  .mobile-card-table tbody td {
    display: block;
    text-align: left;
    padding: 4px 0;
    border: none !important;
    height: auto !important;
  }

  .mobile-card-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 11px;
    color: #888;
    display: block;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .mobile-card-table .md-table-pagination {
    flex-wrap: wrap;
  }

  /* Remove md-table-container overflow clipping on mobile */
  md-table-container {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
}

/* ==========================================================================
   7. Sticky CTA Bar
   ========================================================================== */

@media (max-width: 768px) {
  .sticky-cta {
    position: fixed !important;
    bottom: 56px;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 8px 16px;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .sticky-cta .md-button {
    flex: 1;
    max-width: 200px;
  }
}

/* ==========================================================================
   8. Bottom Navigation Bar
   ========================================================================== */

@media (max-width: 768px) {
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
    z-index: 60;
    border-top: 1px solid #e0e0e0;
  }

  .mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: #666;
    text-decoration: none;
    min-width: 64px;
    min-height: 48px;
    justify-content: center;
    padding: 4px 0;
    transition: color 0.2s;
  }

  .mobile-bottom-nav a.active {
    color: #0f62fe;
  }

  .mobile-bottom-nav a md-icon {
    font-size: 22px !important;
    height: 22px !important;
    width: 22px !important;
    min-height: 0 !important;
    min-width: 0 !important;
  }

  .mobile-bottom-nav a span {
    margin-top: 2px;
  }
}

@media (min-width: 961px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* ==========================================================================
   9. Toast Positioning (above bottom nav)
   ========================================================================== */

@media (max-width: 768px) {
  md-toast {
    bottom: 64px !important;
  }

  md-toast .md-toast-content {
    max-width: 95vw;
  }
}

/* ==========================================================================
   10. Cart Success Animation
   ========================================================================== */

.cart-add-success {
  animation: flash-success 1.5s ease;
}

@keyframes flash-success {
  0%,
  100% {
    background-color: transparent;
  }
  20% {
    background-color: #e8f5e9;
  }
}

/* ==========================================================================
   11. Body padding for bottom nav
   ========================================================================== */

@media (max-width: 768px) {
  body {
    padding-bottom: 56px;
  }
}

/* ==========================================================================
   12. Mobile content area fix
   ========================================================================== */

@media (max-width: 768px) {
  .content {
    position: relative !important;
    top: auto !important;
  }

  .full-height-overflow {
    height: auto;
    min-height: 100vh;
    padding-bottom: 120px;
  }
}

/* ==========================================================================
   13. Stacked form layout helper
   ========================================================================== */

@media (max-width: 768px) {
  .mobile-stack {
    flex-direction: column !important;
  }

  .mobile-stack > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  [layout="row"].mobile-stack {
    flex-direction: column !important;
  }
}

/* ==========================================================================
   Smart Cart View Overrides
   ========================================================================== */

@media (max-width: 768px) {
  /* Smart cart search input full width */
  #rootProductsContainer .md-toolbar-tools .form-control.search {
    width: 100% !important;
    min-height: 44px;
  }

  /* Smart cart mobile table - show leftDiv on mobile, hide rightDiv */
  #rootProductsContainer table.leftDiv {
    display: table !important;
  }

  #rootProductsContainer table.rightDiv {
    display: none !important;
  }

  /* Smart cart proceed to cart sticky */
  #rootProductsContainer .sticky-cta {
    bottom: 56px;
  }
}

/* ==========================================================================
   Product List View Overrides
   ========================================================================== */

@media (max-width: 768px) {
  /* ---- Toolbar ---- */
  .md-toolbar-tools.d-flex.flex-wrap-on-xs {
    flex-wrap: wrap;
    padding: 8px;
    gap: 4px;
  }

  .md-toolbar-tools.d-flex.flex-wrap-on-xs .md-title {
    width: 100%;
    margin-bottom: 4px;
    font-size: 16px;
  }

  .md-toolbar-tools.d-flex.flex-wrap-on-xs
    .md-button[ng-click*="uploadProducts"],
  .md-toolbar-tools.d-flex.flex-wrap-on-xs
    .md-button[ng-click*="updatePriceProducts"],
  .md-toolbar-tools.d-flex.flex-wrap-on-xs
    .md-button[ng-click*="attachDeletionModal"],
  .md-toolbar-tools.d-flex.flex-wrap-on-xs
    .md-button[ng-click*="updateParProducts"] {
    display: none !important;
  }

  .md-toolbar-tools.d-flex.flex-wrap-on-xs md-select {
    max-width: 120px;
    margin: 0 4px !important;
  }

  .md-toolbar-tools.d-flex.flex-wrap-on-xs span[style*="margin-right: 10px"] {
    font-size: 12px;
    margin-right: 4px !important;
  }

  .md-toolbar-tools.flex-wrap-on-xs {
    flex-wrap: wrap;
    padding: 8px;
    gap: 4px;
  }

  .md-toolbar-tools.flex-wrap-on-xs form[flex] {
    flex: 1 1 auto;
    min-width: 0;
  }

  .md-toolbar-tools.flex-wrap-on-xs form input {
    width: 100% !important;
  }

  /* ---- Filter panel ---- */
  div[ng-if*="showFilters"] md-select {
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 !important;
  }

  div[ng-if*="showFilters"] .layout {
    flex-direction: column !important;
  }

  div[ng-if*="showFilters"] .md-button {
    width: 100% !important;
    margin: 4px 0 !important;
  }

  /* ---- Pagination ---- */
  md-table-pagination {
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 4px;
  }

  /* ---- Subheader ---- */
  md-subheader md-toolbar .md-toolbar-tools {
    padding: 4px 8px;
  }

  /* ---- Dialogs ---- */
  md-dialog[aria-label="add seller"] {
    width: 95vw !important;
    padding: 12px !important;
  }

  md-dialog[aria-label="add seller"] .layout-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  md-dialog[aria-label="add seller"] .col-md-3,
  md-dialog[aria-label="add seller"] .col-md-4 {
    width: 100% !important;
    margin-top: 8px;
  }

  /* ==== PRODUCT TABLE CARD LAYOUT ==== */

  /* Hide columns */
  #productListTable td[data-label="Brand"],
  #productListTable td[data-label="Category"],
  #productListTable td[data-label="Packaging"] {
    display: none !important;
  }

  /* Table & container reset */
  #productListTable {
    display: block !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  #productListTable thead {
    display: none !important;
  }

  #productListTable tbody {
    display: block !important;
    padding: 8px !important;
  }

  /* Each row = a card */
  #productListTable tbody tr {
    display: block !important;
    position: relative !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    padding: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Reset ALL cells */
  #productListTable tbody tr td {
    display: block !important;
    position: static !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: normal !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    clear: both !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 14px !important;
    color: #333 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  /* Kill all ::before labels */
  #productListTable tbody tr td::before {
    display: none !important;
    content: none !important;
  }

  /* ---- Product Name ---- */
  #productListTable td[data-label="Name"] {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    line-height: 1.4 !important;
    margin-bottom: 2px !important;
    padding-right: 80px !important;
    word-break: break-word !important;
  }

  #productListTable td[data-label="Name"] span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #productListTable td[data-label="Name"] .grey {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    display: block !important;
    margin-top: 2px !important;
  }

  /* ---- SKU ---- */
  #productListTable td[data-label="SKU"] {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  /* ---- Price ---- */
  #productListTable td[data-label="Price"] {
    display: inline !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f62fe !important;
    margin-top: 4px !important;
  }

  /* ---- Unit ---- */
  #productListTable td[data-label="Unit"] {
    display: inline !important;
    font-size: 12px !important;
    color: #9ca3af !important;
    margin-left: 6px !important;
  }

  /* ---- Status badge: top-right ---- */
  #productListTable td[data-label="Status"] {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #productListTable td[data-label="Status"] .badge {
    font-size: 10px !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    display: inline-block !important;
  }

  /* ---- SYNC button ---- */
  #productListTable td[data-label="Action"] {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid #f3f4f6 !important;
  }

  #productListTable td[data-label="Action"] .md-button {
    min-height: 32px !important;
    min-width: 60px !important;
    font-size: 11px !important;
    line-height: 32px !important;
    padding: 0 10px !important;
  }

  /* ---- Expiry columns (no data-label) ---- */
  #productListTable td:not([data-label]) {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin-top: 2px !important;
  }
}

/* ==========================================================================
   Product Form (Create/Edit) View Overrides
   ========================================================================== */

@media (max-width: 768px) {
  /* Form table: stack label + input vertically */
  .paddinG form table,
  .paddinG form table tbody,
  .paddinG form table tbody tr,
  .paddinG form table tbody tr td,
  md-card-content form table,
  md-card-content form table tbody,
  md-card-content form table tbody tr,
  md-card-content form table tbody tr td {
    display: block !important;
    width: 100% !important;
  }

  /* Label cells */
  md-card-content form table tbody tr td.col-md-2 {
    padding: 8px 0 0 0 !important;
    width: 100% !important;
  }

  md-card-content form table tbody tr td.col-md-2 h5 {
    text-align: left !important;
    font-size: 13px !important;
    margin: 0 !important;
  }

  /* Input cells */
  md-card-content form table tbody tr td.padding-2 {
    padding: 4px 0 8px 0 !important;
  }

  /* All form inputs full width */
  md-card-content form input.form-control,
  md-card-content form .dropdowns,
  md-card-content form md-select.dropdowns,
  md-card-content form .ui-autocomplete {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* md-chips full width */
  md-card-content form md-chips {
    width: 100% !important;
  }

  /* Stock units row: stack vertically */
  md-card-content form [layout="row"][layout-align="start end"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  md-card-content form [layout="row"][layout-align="start end"] > div {
    width: 100% !important;
    padding: 2px 0 !important;
  }

  md-card-content form [layout="row"][layout-align="start end"] h4 {
    text-align: center !important;
  }

  /* Product info header */
  md-card > div[style*="padding: 1%"] {
    padding: 8px !important;
  }

  md-card > div[style*="padding: 1%"] h4 {
    font-size: 14px !important;
    padding: 8px !important;
  }

  /* Image upload section: full width on mobile */
  .col-md-2.col-lg-2.col-xs-12.rightDiv {
    display: none !important;
  }

  /* Mobile image section (leftDiv) */
  .col-md-9.col-lg-9.col-xs-12 {
    width: 100% !important;
    padding: 0 8px !important;
  }

  /* Subheader toolbar: compact */
  md-subheader .leftDiv {
    padding: 8px !important;
  }

  md-subheader .leftDiv current-state-header {
    font-size: 12px !important;
  }

  /* Save button sticky at bottom */
  md-subheader .leftDiv > div[layout="row"][layout-align="center center"] {
    position: fixed !important;
    bottom: 56px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    background: #fff !important;
    padding: 8px 16px !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12) !important;
    justify-content: center !important;
  }

  /* Add bottom padding for sticky save button */
  md-card-content {
    padding-bottom: 70px !important;
  }

  /* Validation icons repositioned */
  md-card-content form md-progress-circular,
  md-card-content form span[ng-if*="validProductName"] md-icon {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    display: inline-block !important;
  }

  /* Error messages */
  md-card-content form .mobileOnly {
    display: block !important;
  }

  /* Third column (error messages on web) hide */
  md-card-content form table tbody tr td:nth-child(3) {
    display: none !important;
  }
}

/* ==========================================================================
   Product View/Details Page Overrides
   ========================================================================== */

@media (max-width: 768px) {
  /* Fix the flex chain: parent div in list-products must be flex + full height */
  ui-view[style*="display: flex"] {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 56px) !important;
    min-height: 0 !important;
  }

  /* The section inside view-product.html */
  ui-view[style*="display: flex"] > section {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* md-subheader: compact, no extra space */
  ui-view[style*="display: flex"] > section > md-subheader {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
  }

  ui-view[style*="display: flex"] > section > md-subheader .md-subheader-inner {
    padding: 0 !important;
    margin: 0 !important;
  }

  ui-view[style*="display: flex"]
    > section
    > md-subheader
    > .md-subheader-content {
    padding: 0 !important;
    margin: 0 !important;
  }

  ui-view[style*="display: flex"] > section > md-subheader md-card {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Title row */
  ui-view[style*="display: flex"]
    > section
    > md-subheader
    md-card-content.padding-1 {
    padding: 6px 10px !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  ui-view[style*="display: flex"]
    > section
    > md-subheader
    md-card-content
    .font-size-1-75 {
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100vw - 120px) !important;
    display: block !important;
  }

  /* Action buttons */
  ui-view[style*="display: flex"]
    > section
    > md-subheader
    md-card-content
    > div[layout="row"] {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  ui-view[style*="display: flex"]
    > section
    > md-subheader
    md-card-content
    > div[layout="row"]
    > div {
    margin: 0 !important;
    padding: 0 !important;
  }

  ui-view[style*="display: flex"]
    > section
    > md-subheader
    md-card-content
    > div[layout="row"]
    .md-icon-button {
    min-height: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    width: 32px !important;
    padding: 2px !important;
    margin: 0 2px !important;
    line-height: 32px !important;
  }

  ui-view[style*="display: flex"]
    > section
    > md-subheader
    md-card-content
    > div[layout="row"]
    .md-icon-button
    md-icon {
    font-size: 18px !important;
    height: 18px !important;
    width: 18px !important;
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Nav bar: 36px, horizontal scroll */
  ui-view[style*="display: flex"]
    > section
    > md-subheader
    div[style*="overflow-x"] {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background-color: #f8fafc !important;
    border-top: 1px solid #eee !important;
  }

  ui-view[style*="display: flex"] > section > md-subheader md-nav-bar {
    width: max-content !important;
    min-width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  ui-view[style*="display: flex"]
    > section
    > md-subheader
    md-nav-bar
    md-nav-bar-wrapper {
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  ui-view[style*="display: flex"] > section > md-subheader md-nav-item {
    min-width: auto !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  ui-view[style*="display: flex"]
    > section
    > md-subheader
    md-nav-item
    .md-button {
    font-size: 11px !important;
    padding: 0 8px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 36px !important;
    min-width: auto !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin: 0 !important;
  }

  ui-view[style*="display: flex"] > section > md-subheader md-nav-ink-bar {
    height: 2px !important;
    bottom: 0 !important;
  }

  /* Content area: takes remaining space, only this scrolls */
  ui-view[style*="display: flex"] > section > div {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   Product Overview Page Overrides
   ========================================================================== */

@media (max-width: 768px) {
  /* Overview outer row: no margins */
  .col-lg-8.col-md-8.mt-2 {
    width: 100% !important;
    padding: 0 10px !important;
    margin-top: 0 !important;
  }

  /* Kill Bootstrap .row margins inside overview */
  .col-lg-8.col-md-8.mt-2 > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 5px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
  }

  .col-lg-8.col-md-8.mt-2 > .row .col-xs-6 {
    width: 40% !important;
    padding: 0 4px !important;
  }

  .col-lg-8.col-md-8.mt-2 > .row .col-xs-6 h5 {
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }

  .col-lg-8.col-md-8.mt-2 > .row > div:not(.col-xs-6) {
    padding: 0 4px !important;
  }

  .col-lg-8.col-md-8.mt-2 > .row > div:not(.col-xs-6) h5 {
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }

  /* md-divider inside overview: minimal */
  .col-lg-8.col-md-8.mt-2 > md-divider {
    margin: 4px 0 !important;
  }

  /* Desktop image: hide */
  div[hide-xs][hide-sm].col-lg-4.col-md-4 {
    display: none !important;
  }

  /* Mobile image: compact */
  .col-lg-4.col-md-4[hide-gt-xs] {
    display: block !important;
    width: 100% !important;
    padding: 4px 8px !important;
  }

  .col-lg-4.col-md-4[hide-gt-xs] md-card {
    margin: 4px 0 !important;
    padding: 0 !important;
  }

  .col-lg-4.col-md-4[hide-gt-xs] md-card img {
    max-width: 150px !important;
    max-height: 150px !important;
  }

  .col-lg-4.col-md-4[hide-gt-xs] md-card-content {
    padding: 4px !important;
  }

  /* Image thumbnails row: compact */
  .col-lg-4.col-md-4[hide-gt-xs] + div[layout="row"] md-card {
    margin: 2px !important;
    padding: 0 !important;
  }

  /* Adurcup button: compact */
  .col-lg-4.col-md-4[hide-gt-xs] ~ div[restrict] {
    padding: 0 8px !important;
  }

  /* Overview parent .row wrapper: no margins */
  .col-lg-4.col-md-4[hide-gt-xs] ~ .col-lg-8 {
    padding: 0 !important;
  }

  /* Dialogs */
  md-dialog[aria-label="reorder"] {
    width: 95vw !important;
  }

  md-dialog[aria-label="reorder"] .row {
    flex-direction: column !important;
  }

  md-dialog[aria-label="reorder"] .col-lg-6,
  md-dialog[aria-label="reorder"] .col-md-6,
  md-dialog[aria-label="reorder"] .col-lg-8,
  md-dialog[aria-label="reorder"] .col-md-8,
  md-dialog[aria-label="reorder"] .col-lg-4,
  md-dialog[aria-label="reorder"] .col-md-4 {
    width: 100% !important;
  }
}

/* ==========================================================================
   Purchase Order Form View Overrides
   ========================================================================== */

@media (max-width: 768px) {
  /* PO form header fields stack vertically */
  .section-header + .subsection-wrapper [layout="row"],
  .section-header ~ div [layout="row"] {
    flex-direction: column !important;
  }

  /* PO form line items as cards */
  .item-card {
    width: 100% !important;
  }

  /* PO form dialog full width */
  .dialog-wrapper.full-width-mobile {
    width: 100vw !important;
    min-width: 100vw !important;
    border-radius: 0 !important;
    padding: 8px !important;
  }

  /* PO form add buyer columns stack */
  .addBuyerColumn1,
  .addBuyerColumn2,
  .addBuyerColumn3 {
    width: 100% !important;
    padding-left: 2% !important;
  }

  /* Column stacking on mobile */
  .column-on-xs {
    flex-direction: column !important;
  }

  .flex-wrap-on-xs {
    flex-wrap: wrap;
  }

  .flex-column-on-xs {
    flex-direction: column;
  }
}

/* ==========================================================================
   Purchase Order List View Overrides
   ========================================================================== */

@media (max-width: 768px) {
  /* PO list filter panel stacking */
  .md-table-toolbar .md-toolbar-tools {
    flex-wrap: wrap;
    padding: 8px;
  }

  /* PO list action buttons wrap */
  .md-table-toolbar .md-toolbar-tools > * {
    margin-bottom: 4px;
  }
}

/* ==========================================================================
   Invoice Form View Overrides
   ========================================================================== */

@media (max-width: 768px) {
  /* Invoice form header fields stack */
  .invoice-form-header [layout="row"] {
    flex-direction: column !important;
  }

  /* Invoice form attachment button full width */
  .invoice-form-header choose-file {
    width: 100%;
  }

  .invoice-form-header choose-file .md-button {
    min-height: 44px;
  }
}

/* ==========================================================================
   Invoice List View Overrides
   ========================================================================== */

@media (max-width: 768px) {
  /* Invoice list toolbar wrapping */
  .invoice-list-toolbar .md-toolbar-tools {
    flex-wrap: wrap;
    padding: 8px;
  }

  .invoice-list-toolbar .md-toolbar-tools > * {
    margin-bottom: 4px;
  }
}

/* ==========================================================================
   Inventory Taking View Overrides
   ========================================================================== */

@media (max-width: 768px) {
  /* Inventory header fields stack */
  .inventory-header [layout="row"] {
    flex-direction: column !important;
  }

  /* Inventory search full width */
  .inventory-header .form-control {
    width: 100% !important;
    min-height: 44px;
  }

  /* Inventory template autocomplete full width */
  .inventory-header md-autocomplete {
    width: 100% !important;
  }
}

/* ==========================================================================
   Spoilage Inventory View Overrides
   ========================================================================== */

@media (max-width: 768px) {
  /* Spoilage header fields stack in single column */
  .spoilage-inventory-header [layout-gt-xs="row"] {
    flex-direction: column !important;
  }

  /* Spoilage search full width */
  .spoilage-inventory-header .md-icon-float {
    width: 100% !important;
  }

  .spoilage-inventory-header .md-icon-float input {
    width: 100% !important;
    min-height: 44px;
  }

  /* Spoilage template autocomplete full width */
  .spoilage-inventory-header md-autocomplete {
    width: 100% !important;
  }
}

/* ==========================================================================
   Wastage Batch View Overrides
   ========================================================================== */

@media (max-width: 768px) {
  /* Wastage batch header fields stack */
  .wastage-batch-header [layout="row"] {
    flex-direction: column !important;
  }

  /* Wastage batch search full width */
  .wastage-batch-header .form-control {
    width: 100% !important;
    min-height: 44px;
  }
}

/* ==========================================================================
   Broken Image Fallback
   ========================================================================== */

img[onerror] {
  min-height: 40px;
  min-width: 40px;
}