/* ==========================================================================
   Shawahed Al Omran ERP — Material Design system
   Roboto type, Material elevation levels, navigation-drawer sidebar,
   fully responsive down to mobile (tables scroll horizontally on small
   screens WITHOUT editing any blade file).
   ========================================================================== */

:root {
    /* Material palette */
    --md-primary: #1565C0;          /* Blue 800 */
    --md-primary-dark: #0D47A1;     /* Blue 900 */
    --md-primary-container: #E3F2FD;/* Blue 50 */
    --md-on-primary: #FFFFFF;
    --md-surface: #FFFFFF;
    --md-background: #F5F7FA;
    --md-outline: #E0E3E7;
    --md-ink: #1C2128;
    --md-body: #44474E;
    --md-muted: #8A9099;
    --md-success: #2E7D32;
    --md-success-container: #E8F5E9;
    --md-danger: #C62828;
    --md-danger-container: #FFEBEE;

    /* Material elevation (dp) */
    --elev-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 3px 1px rgba(0,0,0,.06);
    --elev-2: 0 1px 2px rgba(0,0,0,.10), 0 2px 6px 2px rgba(0,0,0,.08);
    --elev-3: 0 4px 8px 3px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.12);

    --radius: 12px;
    --radius-sm: 8px;
}

/* Base */
body {
    background-color: var(--md-background);
    color: var(--md-body);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6 { color: var(--md-ink); font-weight: 500; }
h4 { font-weight: 700; }
a { color: var(--md-primary); }

/* Login hero */
.login-hero {
    background: linear-gradient(160deg, rgba(13, 71, 161, 0.85), rgba(28, 33, 40, 0.92)),
                url('/images/building.jpg') center/cover no-repeat;
}

/* Buttons — material contained / outlined */
.btn { border-radius: var(--radius-sm); font-weight: 500; letter-spacing: .01em; }
.btn-primary {
    background-color: var(--md-primary);
    border-color: var(--md-primary);
    box-shadow: var(--elev-1);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--md-primary-dark);
    border-color: var(--md-primary-dark);
    box-shadow: var(--elev-2);
}
.btn-success { background-color: var(--md-success); border-color: var(--md-success); }
.btn-icon { border: none; background: transparent; padding: .25rem .5rem; }

/* Cards — material elevation-1, lift to elevation-2 on hover */
.card {
    background-color: var(--md-surface);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
}

/* ==========================================================================
   SIDEBAR — Material navigation drawer.
   Inline at lg+, Bootstrap's offcanvas-lg turns it into a slide-in drawer
   below lg (the hamburger in the topbar opens it).
   ========================================================================== */
.sidebar {
    width: 256px;
    background: var(--md-surface);
    border-right: 1px solid var(--md-outline);
}
@media (min-width: 992px) {
    .sidebar {
        height: 100vh;
        /* fixed height = sticks properly */
        position: sticky;
        top: 0;
        flex-shrink: 0;
        overflow-y: auto;
        /* nav scrolls inside itself if too long */
        overscroll-behavior: contain;
        /* inner scroll doesn't drag the page */
    }
}
.sidebar-brand {
    padding: 16px 16px;
    border-bottom: 1px solid var(--md-outline);
    margin-bottom: 8px;
}
.sidebar .nav { padding: 0 12px 16px; gap: 2px; }
.sidebar .nav-link {
    color: var(--md-body);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .9rem;
    font-weight: 500;
    border-radius: 999px; /* Material 3 pill-shaped drawer items */
    transition: background-color .12s ease, color .12s ease;
}
.sidebar .nav-link i {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
    color: var(--md-muted);
    transition: color .12s ease;
}
.sidebar .nav-link:hover { background: rgba(21, 101, 192, .06); color: var(--md-ink); }
.sidebar .nav-link.active {
    background: var(--md-primary-container);
    color: var(--md-primary-dark);
    font-weight: 700;
}
.sidebar .nav-link.active i { color: var(--md-primary-dark); }

/* Main / Topbar — material app bar */
.main-content { flex: 1; min-height: 100vh; background: var(--md-background); min-width: 0; }
.topbar {
    height: 60px;
    background: var(--md-surface);
    box-shadow: var(--elev-1);
    position: sticky;
    top: 0;
    z-index: 100;
}
.search-box {
    background: var(--md-background);
    border-radius: 999px;
    padding: 7px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 260px;
    color: var(--md-muted);
}
.search-box input { border: none; background: transparent; outline: none; width: 100%; font-size: .875rem; }

/* Stat cards */
.stat-card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    border-left: 4px solid var(--accent, var(--md-primary));
    transition: box-shadow .15s ease;
}
.stat-card:hover { box-shadow: var(--elev-2); }
.stat-card .fs-4, .stat-card .fs-5 { font-weight: 700; color: var(--md-ink); }
.stat-card .small { color: var(--md-muted); font-weight: 500; letter-spacing: .05em; font-size: .72rem; }

/* Report hub cards */
.report-card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    transition: box-shadow .15s ease, transform .15s ease;
    cursor: pointer;
}
.report-card:hover { box-shadow: var(--elev-3); transform: translateY(-2px); }
.report-card i { color: var(--md-primary) !important; }

/* Tables — material data table styling */
.table { --bs-table-hover-bg: rgba(21, 101, 192, .04); font-size: .875rem; }
.table thead th {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--md-muted);
    font-weight: 700;
    background: var(--md-background);
    border-bottom: 1px solid var(--md-outline);
    white-space: nowrap;
}
.table td, .table th { vertical-align: middle; border-color: var(--md-outline); }

/* ==========================================================================
   RESPONSIVE TABLES — global, zero blade edits.
   Below lg, any table inside a card becomes a horizontally scrollable block
   with momentum scrolling on iOS. Covers every list page and every report.
   ========================================================================== */
@media (max-width: 991.98px) {
    .card .table,
    .card .dataTables_wrapper .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .dataTables_wrapper .row { --bs-gutter-x: 0.5rem; }
}

/* Forms — material outlined inputs */
.form-label { font-weight: 500; font-size: .85rem; color: var(--md-ink); }
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--md-outline);
    padding: .55rem .75rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(21, 101, 192, .15);
}

/* Badges */
.badge { font-weight: 500; font-size: .72rem; border-radius: 999px; padding: .4em .8em; }
.badge.bg-success { background-color: var(--md-success) !important; }
.badge.bg-danger { background-color: var(--md-danger) !important; }
.badge.bg-primary { background-color: var(--md-primary) !important; }

/* Alerts */
.alert { border-radius: var(--radius-sm); border: none; }
.alert-success { background-color: var(--md-success-container); color: var(--md-success); }
.alert-danger { background-color: var(--md-danger-container); color: var(--md-danger); }

/* Modals — elevation-3 dialogs */
.modal-content { border-radius: var(--radius); border: none; box-shadow: var(--elev-3); }
.modal-header, .modal-footer { border-color: var(--md-outline); }

/* List groups (Settings / Master Data) */
.list-group-item { border-color: var(--md-outline); font-size: .89rem; }
.list-group-item.active { background-color: var(--md-primary); border-color: var(--md-primary); }

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--md-outline);
}
.dataTables_wrapper .page-link {
    border-radius: var(--radius-sm) !important;
    margin: 0 2px;
    color: var(--md-body);
    border-color: var(--md-outline);
}
.dataTables_wrapper .page-item.active .page-link {
    background-color: var(--md-primary);
    border-color: var(--md-primary);
}

/* Mobile polish */
@media (max-width: 575.98px) {
    h4 { font-size: 1.2rem; }
    .card.p-4 { padding: 1rem !important; }
    .btn-sm { padding: .3rem .6rem; }
    /* Forms with fixed max-width cards go full-width on phones */
    .card[style*="max-width"] { max-width: 100% !important; }
}