:root {
    --primary-teal: #0f4c5c;
    --primary-dark: #0a3a46;
    --primary-light: #1a5f5f;
    --accent-green: #22c55e;
    --accent-orange: #f97316;
    --accent-red: #ef4444;
    --bg-main: #f8fafc;
    --surface: #ffffff;
    --border: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --radius-lg: 12px;
    --radius-xl: 16px;
    --accent-cyan: #06b6d4;
    --accent-cyan-dark: #0891b2;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: var(--bg-main); color: var(--text-primary); font-size: 14px; line-height: 1.6; }

/* TOP NAVIGATION */
.top-nav { background: white; border-bottom: 2px solid var(--primary-teal); padding: 1rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-sm); }
.nav-container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; gap: 0; text-decoration: none; }
.brand img { height: 32px; }
.brand-text { font-size: 1.1rem; font-weight: 700; color: var(--primary-teal); letter-spacing: -0.02em; }
.nav-menu { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav-menu a { color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.2s; display: flex; align-items: center; gap: 0.3rem; }
.nav-menu a:hover, .nav-menu a.active { color: var(--primary-teal); }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-center { display: flex; align-items: center; gap: 0.5rem; flex: 1; justify-content: center; }
.nav-company-name, .nav-site-name { font-weight: 600; font-size: 0.9rem; color: var(--primary-teal); white-space: nowrap; }
.nav-separator { color: var(--text-muted); font-size: 1.1rem; font-weight: 300; }
.nav-selector { display: inline-flex; align-items: center; }
.nav-selector select { background: var(--bg-main); border: 1.5px solid var(--border); border-radius: 8px; padding: 0.35rem 0.75rem; font-weight: 600; font-size: 0.85rem; color: var(--primary-teal); cursor: pointer; outline: none; transition: all 0.2s; max-width: 180px; }
.nav-selector select:hover { border-color: var(--primary-teal); }
.nav-selector select:focus { border-color: var(--primary-teal); box-shadow: 0 0 0 2px rgba(15, 76, 92, 0.15); }
.user-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-teal), var(--primary-light)); color: white; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.nav-bell { position: relative; color: var(--text-secondary); font-size: 1.25rem; padding: .35rem .5rem; border-radius: 8px; transition: background .2s; text-decoration: none; }
.nav-bell:hover { background: var(--bg-main); }
.nav-actions .btn-outline-secondary { color: var(--primary-teal); border-color: var(--primary-teal); }
.nav-actions .btn-outline-secondary:hover { background: var(--primary-teal); color: white; }

/* MAIN WRAPPER */
.main-wrapper { max-width: 1400px; margin: 0 auto; padding: 3rem 2rem; }

/* SECTION HEADER */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border); }
.section-title { font-size: 1.5rem; font-weight: 700; color: var(--primary-teal); display: flex; align-items: center; gap: 0.75rem; }
.section-title i { font-size: 1.75rem; }

/* ACTIONS GRID */
.actions-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; margin-bottom: 3rem; }
.action-card { background: white; border-radius: var(--radius-xl); padding: 2rem 1.5rem; text-decoration: none; color: var(--text-primary); box-shadow: var(--shadow-md); border: 1px solid var(--border); transition: all 0.3s; text-align: center; }
.action-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--primary-teal); color: var(--primary-teal); }
.action-icon { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1.25rem; color: white; }
.action-icon.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.action-icon.green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.action-icon.purple { background: linear-gradient(135deg, #a855f7, #9333ea); }
.action-icon.orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.action-icon.cyan { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark)); }
.action-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-primary); }
.action-card p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }

/* FOOTER */
.site-footer { background: white; border-top: 1px solid var(--border); padding: 1.5rem 2rem; margin-top: 4rem; }
.footer-inner { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.footer-copy { font-size: 0.8rem; color: var(--text-muted); }
.footer-links { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.footer-links a { font-size: 0.8rem; color: var(--text-secondary); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--primary-teal); }

/* DASHBOARD: STATS ROW */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.stat-item { background: white; border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--primary-teal); line-height: 1.1; margin-bottom: 0.25rem; }
.stat-label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }
.stat-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }

/* DASHBOARD: QUICK ACTIONS */
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2.5rem; }
.qa-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: var(--radius-lg); color: white; text-decoration: none; font-weight: 700; font-size: 1rem; transition: all 0.25s; box-shadow: var(--shadow-md); border: none; text-align: center; }
.qa-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: white; }
.qa-btn i { font-size: 1.5rem; }
.qa-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.qa-green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.qa-cyan { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark)); }
.qa-orange { background: linear-gradient(135deg, #f97316, #ea580c); }


/* DASHBOARD: CONTEXT BAR */
.context-bar { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.5rem; padding: 0.35rem 0; }
.context-bar i { color: var(--primary-teal); }

/* DASHBOARD: UNIFIED GRID */
.dash-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 2rem; }
.dash-card { background: white; border-radius: var(--radius-lg); padding: 1.25rem 1rem; text-decoration: none; color: var(--text-primary); box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: all 0.2s; text-align: center; }
.dash-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary-teal); }
.dash-card .dash-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin: 0 auto 0.6rem; color: white; }
.dash-card h3 { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.2; }
.dash-card h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.2; }
.dash-card p { font-size: 0.7rem; color: var(--text-muted); margin: 0.2rem 0 0; }
.dash-subtitle { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.75rem; grid-column: 1 / -1; padding-top: 0.5rem; border-top: 1px solid var(--border); }

/* MATERIALS PROGRESS */
.mat-progress { background: white; border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-md); border: 1px solid var(--border); margin-bottom: 2rem; }
.mat-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.mat-bar:last-child { margin-bottom: 0; }
.mat-name { min-width: 120px; font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); }
.mat-track { flex: 1; height: 8px; background: var(--bg-main); border-radius: 8px; overflow: hidden; }
.mat-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--accent-green), #4ade80); }
.mat-nums { min-width: 100px; text-align: right; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }

/* RESPONSIVE */
@media (max-width: 1400px) { .actions-grid { grid-template-columns: repeat(3, 1fr); } .dash-grid { grid-template-columns: repeat(4, 1fr); } .stats-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .actions-grid { grid-template-columns: repeat(2, 1fr); } .dash-grid { grid-template-columns: repeat(3, 1fr); } .stats-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .nav-menu { display: none; }
    .nav-container { padding: 0 1rem; flex-wrap: wrap; row-gap: 0.6rem; }
    .nav-center { order: 3; flex: 0 0 100%; justify-content: flex-start; gap: 0.4rem; }
    .nav-center:empty { display: none; }
    .nav-selector { flex: 1 1 0; min-width: 0; }
    .nav-selector select { max-width: none; width: 100%; }
    .nav-actions { gap: 0.6rem; }
    .actions-grid { grid-template-columns: 1fr; }
    .main-wrapper { padding: 1.5rem 1rem; }
    .stats-row { grid-template-columns: 1fr; }
    .quick-actions { grid-template-columns: 1fr; }
    .dash-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .dash-grid { grid-template-columns: 1fr; }
    .brand-text { display: none; }
    .user-avatar { width: 34px; height: 34px; font-size: 0.9rem; }
    .nav-bell { font-size: 1.1rem; }
}

/* ===== GLOBAL MOBILE RESPONSIVENESS (applies across all pages) ===== */
img { max-width: 100%; height: auto; }

@media (max-width: 768px) {
    html, body { overflow-x: hidden; max-width: 100%; }

    /* Containers: reduce side padding/margins on phones */
    body .container { margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
    body .page-container { padding-left: 1rem; padding-right: 1rem; }
    body .main-wrapper { padding-left: 1rem; padding-right: 1rem; }
    body .top-bar { padding: 12px 16px; flex-wrap: wrap; gap: 0.5rem; }

    /* Section/page headers -> stack vertically */
    body .page-header, body .section-header, body .etrn-card-footer {
        flex-direction: column; align-items: stretch; gap: 0.75rem;
    }
    body .page-header .page-actions, body .page-header .actions { width: 100%; }

    /* Multi-column grids -> single column */
    body .card-grid, body .cell-grid, body .cols-2, body .content-grid, body .detail-grid,
    body .etrn-card-body, body .feature-list, body .features-grid, body .field-grid, body .field-row,
    body .form-row, body .form-row-4, body .grid, body .info-grid, body .main-content, body .posts-grid,
    body .pricing-grid, body .result-grid, body .stats-grid, body .stats-mini, body .stat-grid,
    body .stat-cards, body .triple, body .plans-grid, body .plan-selector, body .preset-grid,
    body .perm-grid, body .employee-grid, body .employee-list, body .equipment-grid, body .vessel-grid,
    body .tickets-grid, body .article-layout {
        grid-template-columns: 1fr !important;
    }

    /* Flex filter/action bars -> wrap, controls full width */
    body .filters, body .add-row, body .add-section, body .scope-bar, body .site-filter,
    body .pagination-bar { flex-wrap: wrap; gap: 0.6rem; }
    body .filters input, body .filters select,
    body .add-row input, body .add-row select { flex: 1 1 100%; width: 100%; min-width: 0; }

    /* Form controls never overflow their container */
    body input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
    body select, body textarea { max-width: 100%; }

    /* Wide tables scroll inside their wrapper instead of the page */
    body .table-wrap, body .table-wrapper, body .calendar-wrap {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    /* Any bare table becomes its own horizontal scroll container (never clipped).
       The complex sticky-column calendar is excluded — it lives in .calendar-wrap. */
    body table:not(.calendar) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}