/* =============================================================================
   INV-APP-MODERN.CSS  —  Inventory Management Application Modern UI
   =============================================================================

   PURPOSE:
   Provides a unified, modern, production-ready visual layer for all internal
   and external views of the Inventory Management System.  All existing PHP/
   Laravel logic is untouched — this file only governs presentation.

   TABLE OF CONTENTS
   -----------------
   01  CSS Custom Properties (Design Tokens)
   02  Base Reset & Body Defaults
   03  Page Layout Wrapper
   04  Page Header & Title Bar
   05  Action / Nav Link Strip
   06  Cards & Content Panels
   07  Data Tables
   08  Filter Panels
   09  Forms & Inputs
   10  Buttons
   11  Modal Dialogs
   12  Flash Alerts
   13  Status Badges & Pills
   14  Dashboard Stat Cards
   15  Pagination
   16  Inventory-Specific Extras
   17  Work Schedule Components
   18  Tutorial Components
   19  Responsive Breakpoints

   CLASS PREFIX:  iam-  (Inventory App Modern)
   All new classes use this prefix so there are zero collisions with existing
   styles.  Existing classes (.btn-primary, .form-control, .menu-table, etc.)
   are also improved here but scoped narrowly to avoid breaking other pages.
   =============================================================================
*/


/* =============================================================================
   01  CSS CUSTOM PROPERTIES (Design Tokens)
   Change values here to re-theme the entire app.
   =============================================================================*/
:root {
    /* --- Brand colours ---------------------------------------------------- */
    --iam-primary:        #2563eb;   /* main blue  — links, primary buttons    */
    --iam-primary-dark:   #1d4ed8;   /* hover / active state of primary         */
    --iam-primary-light:  #dbeafe;   /* pale blue for highlighted rows          */

    --iam-success:        #059669;   /* green  — received amounts, positive     */
    --iam-success-dark:   #047857;
    --iam-success-light:  #d1fae5;

    --iam-warning:        #d97706;   /* amber  — taken amounts, caution         */
    --iam-warning-dark:   #b45309;
    --iam-warning-light:  #fef3c7;

    --iam-danger:         #dc2626;   /* red    — errors, deletes, low stock     */
    --iam-danger-dark:    #b91c1c;
    --iam-danger-light:   #fee2e2;

    --iam-info:           #0891b2;   /* cyan   — informational badges           */
    --iam-info-light:     #cffafe;

    --iam-purple:         #7c3aed;   /* purple — secondary accent               */
    --iam-purple-light:   #ede9fe;

    /* --- Neutral palette -------------------------------------------------- */
    --iam-bg:             #f1f5f9;   /* page background                         */
    --iam-surface:        #ffffff;   /* card / panel surface                    */
    --iam-border:         #e2e8f0;   /* dividers, input borders                 */
    --iam-border-strong:  #cbd5e1;

    --iam-text:           #1e293b;   /* primary body text                       */
    --iam-text-secondary: #475569;   /* labels, secondary copy                  */
    --iam-text-muted:     #94a3b8;   /* placeholder, disabled                   */

    /* --- Typography ------------------------------------------------------- */
    --iam-font:           -apple-system, BlinkMacSystemFont, "Segoe UI",
                          Roboto, Helvetica, Arial, sans-serif;
    --iam-font-size-base: 0.9375rem; /* 15 px */
    --iam-font-size-sm:   0.8125rem; /* 13 px */
    --iam-font-size-lg:   1.125rem;  /* 18 px */

    /* --- Spacing (multiples of 4 px) -------------------------------------- */
    --iam-space-1:  0.25rem;   /*  4 px */
    --iam-space-2:  0.5rem;    /*  8 px */
    --iam-space-3:  0.75rem;   /* 12 px */
    --iam-space-4:  1rem;      /* 16 px */
    --iam-space-5:  1.25rem;   /* 20 px */
    --iam-space-6:  1.5rem;    /* 24 px */
    --iam-space-8:  2rem;      /* 32 px */
    --iam-space-10: 2.5rem;    /* 40 px */

    /* --- Radii ------------------------------------------------------------ */
    --iam-radius-sm:  0.375rem;
    --iam-radius:     0.5rem;
    --iam-radius-lg:  0.75rem;
    --iam-radius-xl:  1rem;

    /* --- Shadows ---------------------------------------------------------- */
    --iam-shadow-sm:  0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);
    --iam-shadow:     0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
    --iam-shadow-lg:  0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
    --iam-shadow-xl:  0 20px 60px rgba(0,0,0,.18);

    /* --- Transitions ------------------------------------------------------- */
    --iam-transition: 150ms ease;
}


/* =============================================================================
   02  BASE RESET & BODY DEFAULTS
   =============================================================================*/
*, *::before, *::after {
    box-sizing: border-box;
}

/* Apply clean base to the main content area only — keeps header/footer intact */
.content {
    background-color: var(--iam-bg);
    min-height: 60vh;
    font-family: var(--iam-font);
    font-size: var(--iam-font-size-base);
    color: var(--iam-text);
    line-height: 1.6;
}

/* Colour plain anchor links — excludes all button-class variants */
.content a:not([class*="btn"]) {
    color: var(--iam-primary);
    text-decoration: none;
    transition: color var(--iam-transition);
}

.content a:not([class*="btn"]):hover {
    color: var(--iam-primary-dark);
    text-decoration: underline;
}


/* =============================================================================
   03  PAGE LAYOUT WRAPPER
   .iam-page  wraps the entire content area of each view.
   =============================================================================*/
.iam-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--iam-space-6) var(--iam-space-6);
}

/* Full-width variant for wide tables */
.iam-page.iam-page--wide {
    max-width: 100%;
    padding: var(--iam-space-6) var(--iam-space-8);
}

/* Narrow / form-focused pages */
.iam-page.iam-page--narrow {
    max-width: 800px;
}


/* =============================================================================
   04  PAGE HEADER & TITLE BAR
   .iam-page-header  sits at the top of each page with title + action links.
   =============================================================================*/
.iam-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iam-space-4);
    margin-bottom: var(--iam-space-6);
    padding-bottom: var(--iam-space-4);
    border-bottom: 2px solid var(--iam-border);
}

.iam-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--iam-text);
    margin: 0;
    letter-spacing: -0.02em;
}

/* Small coloured accent bar before page titles */
.iam-page-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 1.2em;
    background: var(--iam-primary);
    border-radius: 2px;
    margin-right: var(--iam-space-3);
    vertical-align: middle;
}

.iam-page-subtitle {
    font-size: var(--iam-font-size-sm);
    color: var(--iam-text-secondary);
    margin: var(--iam-space-1) 0 0;
}

.iam-page-actions {
    display: flex;
    align-items: center;
    gap: var(--iam-space-3);
    flex-wrap: wrap;
}


/* =============================================================================
   05  ACTION / NAV LINK STRIP
   Quick REFRESH | HISTORY | BACK links at top of pages.
   =============================================================================*/
.iam-nav-strip {
    display: flex;
    align-items: center;
    gap: var(--iam-space-2);
    margin-bottom: var(--iam-space-5);
    flex-wrap: wrap;
}

.iam-nav-strip .iam-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--iam-space-1);
    padding: var(--iam-space-1) var(--iam-space-3);
    font-size: var(--iam-font-size-sm);
    font-weight: 600;
    color: var(--iam-primary);
    border: 1px solid var(--iam-border);
    border-radius: var(--iam-radius-sm);
    background: var(--iam-surface);
    text-decoration: none;
    transition: background var(--iam-transition), border-color var(--iam-transition);
}

.iam-nav-strip .iam-nav-link:hover {
    background: var(--iam-primary-light);
    border-color: var(--iam-primary);
    text-decoration: none;
    color: var(--iam-primary-dark);
}


/* =============================================================================
   06  CARDS & CONTENT PANELS
   =============================================================================*/
.iam-card {
    background: var(--iam-surface);
    border: 1px solid var(--iam-border);
    border-radius: var(--iam-radius-lg);
    box-shadow: var(--iam-shadow-sm);
    padding: var(--iam-space-6);
    margin-bottom: var(--iam-space-5);
}

.iam-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--iam-space-4);
    padding-bottom: var(--iam-space-3);
    border-bottom: 1px solid var(--iam-border);
}

.iam-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--iam-text);
    margin: 0;
}

/* Section toggle container (replaces .sh-card) */
.iam-section {
    background: var(--iam-surface);
    border: 1px solid var(--iam-border);
    border-radius: var(--iam-radius-lg);
    box-shadow: var(--iam-shadow-sm);
    margin-bottom: var(--iam-space-5);
    overflow: hidden;
}

.iam-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--iam-space-4) var(--iam-space-6);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--iam-border);
    cursor: pointer;
    user-select: none;
}

.iam-section-body {
    padding: var(--iam-space-6);
}


/* =============================================================================
   07  DATA TABLES
   Replace .menu-table and .menu-full-table with .iam-table
   =============================================================================*/
.iam-table-wrap {
    overflow-x: auto;
    border-radius: var(--iam-radius-lg);
    box-shadow: var(--iam-shadow-sm);
    border: 1px solid var(--iam-border);
    background: var(--iam-surface);
    margin-bottom: var(--iam-space-5);
}

.iam-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--iam-font-size-sm);
    color: var(--iam-text);
    background: var(--iam-surface);
}

/* Table head */
.iam-table thead tr {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.iam-table thead th {
    padding: var(--iam-space-3) var(--iam-space-4);
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border: none;
}

/* Table body rows */
.iam-table tbody tr {
    border-bottom: 1px solid var(--iam-border);
    transition: background var(--iam-transition);
}

.iam-table tbody tr:last-child {
    border-bottom: none;
}

.iam-table tbody tr:hover {
    background-color: #f8fafc;
}

/* Zebra striping — optional, toggled by .iam-table--striped */
.iam-table--striped tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

.iam-table td {
    padding: var(--iam-space-3) var(--iam-space-4);
    vertical-align: middle;
    border: none;
    color: var(--iam-text-secondary);
}

/* Colour semantics kept from original inline styles */
.iam-table td.iam-td-received { color: var(--iam-success);  font-weight: 600; }
.iam-table td.iam-td-taken    { color: var(--iam-warning);  font-weight: 600; }
.iam-table td.iam-td-stock    { color: var(--iam-success);  font-weight: 700; }
.iam-table td.iam-td-danger   { color: var(--iam-danger);   font-weight: 600; }
.iam-table td.iam-td-warn     { color: var(--iam-warning);  font-weight: 600; }
.iam-table td.iam-td-muted    { color: var(--iam-text-muted); }

/* Checkbox column */
.iam-table th.iam-th-check,
.iam-table td.iam-td-check {
    width: 42px;
    text-align: center;
    padding-left: var(--iam-space-4);
}

/* Link inside table */
.iam-table td a {
    color: var(--iam-primary);
    font-weight: 500;
}

.iam-table td a:hover {
    color: var(--iam-primary-dark);
}

/* Legacy class override — uses same styles */
.menu-table,
.menu-full-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--iam-font-size-sm);
    color: var(--iam-text);
    background: var(--iam-surface);
}

.menu-table thead tr,
.menu-full-table thead tr {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.menu-table thead th,
.menu-full-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.73rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border: none;
}

.menu-table tbody tr,
.menu-full-table tbody tr {
    border-bottom: 1px solid var(--iam-border);
    transition: background var(--iam-transition);
}

.menu-table tbody tr:hover,
.menu-full-table tbody tr:hover {
    background: #f8fafc;
}

.menu-table td,
.menu-full-table td {
    padding: 10px 14px;
    vertical-align: middle;
    border: none;
    color: var(--iam-text-secondary);
}

/* Table wrapper for legacy tables */
.iam-legacy-table-wrap {
    overflow-x: auto;
    border-radius: var(--iam-radius-lg);
    box-shadow: var(--iam-shadow-sm);
    border: 1px solid var(--iam-border);
    background: var(--iam-surface);
    margin-bottom: var(--iam-space-5);
}


/* =============================================================================
   08  FILTER PANELS
   Collapsible search/filter forms shown below a toggle button.
   =============================================================================*/
.iam-filter-panel {
    background: var(--iam-surface);
    border: 1px solid var(--iam-border);
    border-radius: var(--iam-radius-lg);
    box-shadow: var(--iam-shadow-sm);
    padding: var(--iam-space-5);
    margin-bottom: var(--iam-space-5);
}

.iam-filter-panel .iam-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--iam-space-4);
    align-items: end;
}

.iam-filter-panel .iam-filter-actions {
    display: flex;
    gap: var(--iam-space-3);
    margin-top: var(--iam-space-4);
    padding-top: var(--iam-space-4);
    border-top: 1px solid var(--iam-border);
}

/* Legacy .card.form-container used as filter */
.card.form-container {
    background: var(--iam-surface);
    border: 1px solid var(--iam-border);
    border-radius: var(--iam-radius-lg);
    box-shadow: var(--iam-shadow-sm);
    padding: var(--iam-space-5);
    margin-bottom: var(--iam-space-5);
}


/* =============================================================================
   09  FORMS & INPUTS
   =============================================================================*/
.iam-form-group,
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--iam-space-1);
    margin-bottom: var(--iam-space-4);
}

.iam-label,
.form-group label {
    font-size: var(--iam-font-size-sm);
    font-weight: 600;
    color: var(--iam-text-secondary);
    letter-spacing: 0.02em;
}

.iam-input,
.form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--iam-font-size-base);
    font-family: var(--iam-font);
    color: var(--iam-text);
    background: var(--iam-surface);
    border: 1px solid var(--iam-border-strong);
    border-radius: var(--iam-radius-sm);
    transition: border-color var(--iam-transition), box-shadow var(--iam-transition);
    appearance: none;
    -webkit-appearance: none;
}

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

.iam-input::placeholder,
.form-control::placeholder {
    color: var(--iam-text-muted);
}

textarea.form-control,
textarea.iam-input {
    resize: vertical;
    min-height: 80px;
}

select.form-control,
select.iam-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
    cursor: pointer;
}

/* Required field marker */
.iam-required {
    color: var(--iam-danger);
    font-weight: 700;
    margin-left: 2px;
}

/* Field hint text */
.iam-hint {
    font-size: 0.75rem;
    color: var(--iam-text-muted);
    margin-top: 2px;
}

/* Input error state */
.iam-input.iam-input-error {
    border-color: var(--iam-danger);
    box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

/* Field-level error message */
.iam-field-error {
    display: block;
    font-size: 0.75rem;
    color: var(--iam-danger);
    margin-top: 3px;
}

/* Muted / read-only background */
.iam-bg-muted {
    background: var(--iam-bg-alt) !important;
}

/* Inline form layout */
.iam-form-inline {
    display: flex;
    gap: var(--iam-space-4);
    flex-wrap: wrap;
    align-items: flex-end;
}

.iam-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--iam-space-4);
}


/* =============================================================================
   10  BUTTONS
   =============================================================================*/
/* Base button */
.iam-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--iam-space-2);
    padding: 0.45rem 1.1rem;
    font-size: var(--iam-font-size-sm);
    font-weight: 600;
    font-family: var(--iam-font);
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    border-radius: var(--iam-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--iam-transition), box-shadow var(--iam-transition),
                transform 60ms ease, border-color var(--iam-transition);
    white-space: nowrap;
    line-height: 1.4;
}

.iam-btn:hover  { text-decoration: none; }
.iam-btn:active { transform: translateY(1px); }

/* Colour variants */
.iam-btn-primary {
    background: var(--iam-primary);
    color: #fff;
    border-color: var(--iam-primary);
}
.iam-btn-primary:hover {
    background: var(--iam-primary-dark);
    border-color: var(--iam-primary-dark);
    color: #fff;
}

.iam-btn-success {
    background: var(--iam-success);
    color: #fff;
    border-color: var(--iam-success);
}
.iam-btn-success:hover {
    background: var(--iam-success-dark);
    border-color: var(--iam-success-dark);
    color: #fff;
}

.iam-btn-warning {
    background: var(--iam-warning);
    color: #fff;
    border-color: var(--iam-warning);
}
.iam-btn-warning:hover {
    background: var(--iam-warning-dark);
    border-color: var(--iam-warning-dark);
    color: #fff;
}

.iam-btn-danger {
    background: var(--iam-danger);
    color: #fff;
    border-color: var(--iam-danger);
}
.iam-btn-danger:hover {
    background: var(--iam-danger-dark);
    border-color: var(--iam-danger-dark);
    color: #fff;
}

.iam-btn-secondary {
    background: var(--iam-surface);
    color: var(--iam-text-secondary);
    border-color: var(--iam-border-strong);
}
.iam-btn-secondary:hover {
    background: #f1f5f9;
    color: var(--iam-text);
    border-color: var(--iam-primary);
}

.iam-btn-info {
    background: var(--iam-info);
    color: #fff;
    border-color: var(--iam-info);
}

.iam-btn-purple {
    background: var(--iam-purple);
    color: #fff;
    border-color: var(--iam-purple);
}

/* Size modifiers */
.iam-btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
}

.iam-btn-lg {
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
}

/* Fix: prevent browser :link / :visited defaults from turning anchor-buttons blue */
a.iam-btn:link,
a.iam-btn:visited { text-decoration: none; }

a.iam-btn-primary:link,   a.iam-btn-primary:visited,
a.iam-btn-success:link,   a.iam-btn-success:visited,
a.iam-btn-warning:link,   a.iam-btn-warning:visited,
a.iam-btn-danger:link,    a.iam-btn-danger:visited,
a.iam-btn-info:link,      a.iam-btn-info:visited,
a.iam-btn-purple:link,    a.iam-btn-purple:visited  { color: #fff; }

a.iam-btn-secondary:link,
a.iam-btn-secondary:visited { color: var(--iam-text-secondary); }

/* Legacy .btn override (scoped to .content only) */
.content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 1rem;
    font-size: var(--iam-font-size-sm);
    font-weight: 600;
    font-family: var(--iam-font);
    border-radius: var(--iam-radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--iam-transition), opacity var(--iam-transition);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}

.content .btn-primary {
    background: var(--iam-primary);
    color: #fff;
    border-color: var(--iam-primary);
}
.content .btn-primary:hover {
    background: var(--iam-primary-dark);
    color: #fff;
}

/* Buttons group */
.iam-btn-group {
    display: flex;
    gap: var(--iam-space-2);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--iam-space-4);
}


/* =============================================================================
   11  MODAL DIALOGS
   Full-screen overlay with centred content card.
   =============================================================================*/
.iam-modal-overlay,
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--iam-space-4);
    overflow-y: auto;
}

.iam-modal-content,
.modal-content {
    background: var(--iam-surface);
    border-radius: var(--iam-radius-xl);
    box-shadow: var(--iam-shadow-xl);
    padding: var(--iam-space-8);
    width: 100%;
    max-width: 540px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    animation: iam-modal-in 200ms ease;
    text-align: left;
}

@keyframes iam-modal-in {
    from { opacity: 0; transform: translateY(-16px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.iam-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--iam-space-5);
    padding-bottom: var(--iam-space-4);
    border-bottom: 1px solid var(--iam-border);
}

.iam-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--iam-text);
    margin: 0;
}

.iam-close-btn,
.close-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--iam-text-muted);
    cursor: pointer;
    padding: var(--iam-space-1);
    border-radius: var(--iam-radius-sm);
    transition: color var(--iam-transition), background var(--iam-transition);
}

.iam-close-btn:hover,
.close-btn:hover {
    color: var(--iam-danger);
    background: var(--iam-danger-light);
}


/* =============================================================================
   12  FLASH ALERTS
   Session success / error messages.
   =============================================================================*/
.iam-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--iam-space-3);
    padding: var(--iam-space-4) var(--iam-space-5);
    border-radius: var(--iam-radius);
    border-left: 4px solid;
    margin-bottom: var(--iam-space-5);
    font-size: var(--iam-font-size-sm);
    font-weight: 500;
}

.iam-alert-success,
.alert-success {
    background: var(--iam-success-light);
    border-left-color: var(--iam-success);
    color: #065f46;
}

.iam-alert-danger,
.alert-danger {
    background: var(--iam-danger-light);
    border-left-color: var(--iam-danger);
    color: #7f1d1d;
}

.iam-alert-warning {
    background: var(--iam-warning-light);
    border-left-color: var(--iam-warning);
    color: #78350f;
}

.iam-alert-info {
    background: var(--iam-info-light);
    border-left-color: var(--iam-info);
    color: #164e63;
}

/* Override legacy alert styles inside .content */
.content .alert {
    padding: var(--iam-space-4) var(--iam-space-5);
    border-radius: var(--iam-radius);
    border-left: 4px solid;
    margin-bottom: var(--iam-space-5);
    font-size: var(--iam-font-size-sm);
    font-weight: 500;
}

.content .alert h5 {
    margin: 0;
    font-size: var(--iam-font-size-sm);
    font-weight: 600;
}

.content .alert-success {
    background: var(--iam-success-light) !important;
    border-left-color: var(--iam-success) !important;
    color: #065f46 !important;
}

.content .alert-success h5 {
    color: #065f46 !important;
}

.content .alert-danger {
    background: var(--iam-danger-light) !important;
    border-left-color: var(--iam-danger) !important;
    color: #7f1d1d !important;
}

.content .alert-danger h5 {
    color: #7f1d1d !important;
}


/* =============================================================================
   13  STATUS BADGES & PILLS
   =============================================================================*/
.iam-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.65em;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 9999px;
    white-space: nowrap;
}

.iam-badge-success  { background: var(--iam-success-light); color: var(--iam-success-dark); }
.iam-badge-warning  { background: var(--iam-warning-light); color: var(--iam-warning-dark); }
.iam-badge-danger   { background: var(--iam-danger-light);  color: var(--iam-danger-dark);  }
.iam-badge-info     { background: var(--iam-info-light);    color: var(--iam-info);          }
.iam-badge-primary  { background: var(--iam-primary-light); color: var(--iam-primary-dark);  }
.iam-badge-purple   { background: var(--iam-purple-light);  color: var(--iam-purple);        }
.iam-badge-neutral  { background: #f1f5f9;                  color: var(--iam-text-secondary); }

/* Order status convenience classes */
.iam-status-placed     { background: #dbeafe; color: #1d4ed8; }
.iam-status-pending    { background: #fef3c7; color: #92400e; }
.iam-status-completed  { background: #d1fae5; color: #065f46; }
.iam-status-cancelled  { background: #fee2e2; color: #991b1b; }
.iam-status-review     { background: #ede9fe; color: #5b21b6; }
.iam-status-approved   { background: #d1fae5; color: #065f46; }
.iam-status-rejected   { background: #fee2e2; color: #991b1b; }


/* =============================================================================
   14  DASHBOARD STAT CARDS
   Used in admin_template_standalone and user dashboard.
   =============================================================================*/
.iam-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--iam-space-5);
    margin-bottom: var(--iam-space-6);
}

.iam-stat-card {
    background: var(--iam-surface);
    border: 1px solid var(--iam-border);
    border-radius: var(--iam-radius-lg);
    box-shadow: var(--iam-shadow-sm);
    padding: var(--iam-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--iam-space-2);
    transition: box-shadow var(--iam-transition), transform var(--iam-transition);
}

.iam-stat-card:hover {
    box-shadow: var(--iam-shadow);
    transform: translateY(-2px);
}

.iam-stat-label {
    font-size: var(--iam-font-size-sm);
    font-weight: 600;
    color: var(--iam-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.iam-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--iam-text);
    line-height: 1;
}

.iam-stat-card.iam-stat-primary  { border-top: 3px solid var(--iam-primary);  }
.iam-stat-card.iam-stat-success  { border-top: 3px solid var(--iam-success);  }
.iam-stat-card.iam-stat-warning  { border-top: 3px solid var(--iam-warning);  }
.iam-stat-card.iam-stat-danger   { border-top: 3px solid var(--iam-danger);   }
.iam-stat-card.iam-stat-info     { border-top: 3px solid var(--iam-info);     }
.iam-stat-card.iam-stat-purple   { border-top: 3px solid var(--iam-purple);   }


/* =============================================================================
   15  PAGINATION
   =============================================================================*/
.iam-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--iam-space-2);
    margin-top: var(--iam-space-5);
    flex-wrap: wrap;
}

/* Override default Laravel pagination inside .content */
.content nav[aria-label],
.content .pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--iam-space-5);
}

.content .pagination span,
.content .pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--iam-space-2);
    font-size: var(--iam-font-size-sm);
    font-weight: 500;
    border: 1px solid var(--iam-border);
    border-radius: var(--iam-radius-sm);
    color: var(--iam-text-secondary);
    background: var(--iam-surface);
    text-decoration: none;
    transition: background var(--iam-transition), border-color var(--iam-transition);
}

.content .pagination a:hover {
    background: var(--iam-primary-light);
    border-color: var(--iam-primary);
    color: var(--iam-primary);
    text-decoration: none;
}

.content .pagination .active span,
.content .pagination span[aria-current] {
    background: var(--iam-primary);
    border-color: var(--iam-primary);
    color: #fff;
    font-weight: 700;
}


/* =============================================================================
   16  INVENTORY-SPECIFIC EXTRAS
   =============================================================================*/

/* "EXPECTING" purchase link in received table */
.iam-expecting-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--iam-warning);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 9999px;
    text-decoration: none;
    margin-right: var(--iam-space-2);
    transition: background var(--iam-transition);
}
.iam-expecting-link:hover {
    background: var(--iam-warning-dark);
    color: #fff;
    text-decoration: none;
}

/* Chart canvas wrapper */
.iam-chart-wrap {
    background: var(--iam-surface);
    border: 1px solid var(--iam-border);
    border-radius: var(--iam-radius-lg);
    box-shadow: var(--iam-shadow-sm);
    padding: var(--iam-space-5);
    overflow-x: auto;
    margin-bottom: var(--iam-space-5);
}

/* Item detail page */
.iam-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--iam-space-4);
    margin-bottom: var(--iam-space-5);
}

.iam-detail-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--iam-space-3) var(--iam-space-4);
    background: #f8fafc;
    border-radius: var(--iam-radius-sm);
    border-left: 3px solid var(--iam-border);
}

.iam-detail-row:hover {
    border-left-color: var(--iam-primary);
}

.iam-detail-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--iam-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.iam-detail-value {
    font-size: var(--iam-font-size-base);
    font-weight: 600;
    color: var(--iam-text);
}

/* Image gallery */
.iam-image-row {
    display: flex;
    gap: var(--iam-space-4);
    flex-wrap: wrap;
    margin-top: var(--iam-space-4);
}

.iam-image-row img {
    max-width: 260px;
    height: auto;
    border-radius: var(--iam-radius);
    border: 1px solid var(--iam-border);
    box-shadow: var(--iam-shadow-sm);
    object-fit: cover;
}

/* "+ MORE FIELDS" toggle */
.iam-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--iam-space-2);
    padding: var(--iam-space-2) var(--iam-space-3);
    color: var(--iam-primary);
    font-size: var(--iam-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px dashed var(--iam-primary);
    border-radius: var(--iam-radius-sm);
    background: var(--iam-primary-light);
    text-decoration: none;
    margin: var(--iam-space-3) 0;
    transition: background var(--iam-transition);
}
.iam-more-toggle:hover {
    background: #bfdbfe;
    text-decoration: none;
    color: var(--iam-primary-dark);
}

/* Extra fields panel */
.iam-extra-fields {
    border: 1px solid var(--iam-border);
    border-radius: var(--iam-radius);
    background: #fafbfc;
    padding: var(--iam-space-4);
    margin-top: var(--iam-space-2);
}

/* Supplier warning notice */
.iam-supplier-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--iam-space-3);
    padding: var(--iam-space-3) var(--iam-space-4);
    background: var(--iam-danger-light);
    border-left: 4px solid var(--iam-danger);
    border-radius: var(--iam-radius-sm);
    font-size: var(--iam-font-size-sm);
    font-weight: 600;
    color: var(--iam-danger-dark);
    margin-bottom: var(--iam-space-4);
}


/* =============================================================================
   17  WORK SCHEDULE COMPONENTS
   =============================================================================*/
.iam-week-block {
    background: var(--iam-surface);
    border: 1px solid var(--iam-border);
    border-radius: var(--iam-radius-lg);
    box-shadow: var(--iam-shadow-sm);
    margin-bottom: var(--iam-space-5);
    overflow: hidden;
}

.iam-week-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--iam-space-3) var(--iam-space-5);
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #fff;
    font-size: var(--iam-font-size-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Vacation / schedule status pills  */
.iam-sched-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.iam-sched-approved   { background: #d1fae5; color: #065f46; }
.iam-sched-pending    { background: #fef3c7; color: #92400e; }
.iam-sched-rejected   { background: #fee2e2; color: #991b1b; }
.iam-sched-review     { background: #ede9fe; color: #5b21b6; }
.iam-sched-cancelled  { background: #f1f5f9; color: #475569; }


/* =============================================================================
   18  TUTORIAL COMPONENTS
   =============================================================================*/
.iam-tut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--iam-space-5);
    margin-bottom: var(--iam-space-6);
}

.iam-tut-card {
    background: var(--iam-surface);
    border: 1px solid var(--iam-border);
    border-radius: var(--iam-radius-lg);
    box-shadow: var(--iam-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--iam-transition), transform var(--iam-transition);
    display: flex;
    flex-direction: column;
}

.iam-tut-card:hover {
    box-shadow: var(--iam-shadow);
    transform: translateY(-3px);
}

.iam-tut-card-body {
    padding: var(--iam-space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--iam-space-2);
}

.iam-tut-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--iam-text);
    margin: 0;
}

.iam-tut-card-meta {
    font-size: var(--iam-font-size-sm);
    color: var(--iam-text-muted);
}

.iam-tut-card-footer {
    padding: var(--iam-space-3) var(--iam-space-5);
    border-top: 1px solid var(--iam-border);
    background: #f8fafc;
    display: flex;
    gap: var(--iam-space-2);
    flex-wrap: wrap;
}

/* Tutorial detail sections */
.iam-tut-section {
    background: var(--iam-surface);
    border: 1px solid var(--iam-border);
    border-radius: var(--iam-radius-lg);
    box-shadow: var(--iam-shadow-sm);
    margin-bottom: var(--iam-space-4);
    overflow: hidden;
}

.iam-tut-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--iam-space-4) var(--iam-space-5);
    cursor: pointer;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--iam-border);
    user-select: none;
}

.iam-tut-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--iam-text);
    margin: 0;
}

.iam-tut-section-body {
    padding: var(--iam-space-5);
}

.iam-tut-media {
    max-width: 100%;
    height: auto;
    border-radius: var(--iam-radius);
    border: 1px solid var(--iam-border);
    box-shadow: var(--iam-shadow-sm);
    margin-top: var(--iam-space-3);
}

video.iam-tut-media {
    max-width: 100%;
    border-radius: var(--iam-radius);
}


/* =============================================================================
   19  RESPONSIVE BREAKPOINTS
   =============================================================================*/

/* Tablet — ≤ 1024px */
@media (max-width: 1024px) {
    .iam-page { padding: var(--iam-space-5) var(--iam-space-4); }
    .iam-tut-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .iam-stats-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* Large phone / small tablet — ≤ 768px */
@media (max-width: 768px) {
    .iam-page { padding: var(--iam-space-4) var(--iam-space-3); }

    .iam-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .iam-page-title { font-size: 1.25rem; }

    .iam-table thead th,
    .menu-table thead th,
    .menu-full-table thead th {
        font-size: 0.68rem;
        padding: 8px 10px;
    }

    .iam-table td,
    .menu-table td,
    .menu-full-table td {
        padding: 8px 10px;
    }

    .iam-modal-content,
    .modal-content {
        padding: var(--iam-space-5) var(--iam-space-4);
    }

    .iam-stats-grid { grid-template-columns: 1fr 1fr; }

    .iam-detail-grid { grid-template-columns: 1fr; }

    .iam-filter-panel .iam-filter-grid { grid-template-columns: 1fr; }

    .iam-form-row { grid-template-columns: 1fr; }

    .iam-btn-group { flex-direction: column; align-items: flex-start; }
}

/* Phone — ≤ 480px */
@media (max-width: 480px) {
    .iam-stats-grid { grid-template-columns: 1fr; }

    .iam-tut-grid { grid-template-columns: 1fr; }

    .iam-image-row img { max-width: 100%; }

    .iam-modal-content,
    .modal-content { padding: var(--iam-space-4); }
}


/* =============================================================================
   END OF INV-APP-MODERN.CSS
   =============================================================================*/