/* ============================================================
   FishProject — Aquarium Theme v2.2
   ============================================================ */

:root {
    /* Spec palette (canonical names) */
    --color-primary: #0077B6;        /* Ocean Blue */
    --color-secondary: #00B4D8;      /* Aqua Teal */
    --color-success: #2DC653;        /* Reef Green */
    --color-warning: #FF6B35;        /* Coral Warning */
    --color-danger: #E63946;         /* Alert Red */
    --color-navy: #03045E;           /* Deep Navy */
    --color-light-blue: #E8F4FD;
    --color-light-green: #E8F5E9;
    --color-light-red: #FDECEA;
    --color-light-orange: #FFF3E0;

    /* Legacy aliases — keep old class names working */
    --fp-primary: #0077B6;
    --fp-secondary: #00B4D8;
    --fp-success: #2DC653;
    --fp-warning: #FF6B35;
    --fp-danger: #E63946;
    --fp-dark: #03045E;
    --fp-light: #CAF0F8;
}

html, body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #F5F8FB;
    color: #1E2A3A;
}

a { color: var(--color-primary); }
a:hover { color: var(--color-navy); }

/* ===== Buttons ===== */
.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--color-navy);
    border-color: var(--color-navy);
}
.btn-success { background: var(--color-success); border-color: var(--color-success); }
.btn-warning { background: var(--color-warning); border-color: var(--color-warning); color: #fff; }
.btn-danger  { background: var(--color-danger);  border-color: var(--color-danger); }

.btn-aqua {
    background-color: var(--color-secondary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 500;
}
.btn-aqua:hover, .btn-aqua:focus {
    background-color: var(--color-primary);
    color: #fff;
}
.btn-ocean {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 500;
}
.btn-ocean:hover, .btn-ocean:focus {
    background-color: var(--color-navy);
    color: #fff;
}

/* ===== App shell layout ===== */
.fp-shell { display: flex; min-height: 100vh; }
.fp-sidebar {
    width: 240px;
    background-color: var(--color-navy) !important;
    color: #fff;
    padding: 0;
    flex-shrink: 0;
}
.fp-sidebar .brand {
    padding: 18px 20px;
    font-size: 1.3rem;
    font-weight: 700;
    background-color: var(--color-primary) !important;
    border-bottom: 1px solid var(--color-secondary) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}
.fp-sidebar .brand i { color: #fff; }
.fp-sidebar .nav-link {
    color: #ADB5BD !important;
    padding: 11px 20px;
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.fp-sidebar .nav-link:hover {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    border-left-color: var(--color-secondary);
}
.fp-sidebar .nav-link.active {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    border-left-color: var(--color-secondary);
}
.fp-sidebar .nav-section {
    padding: 14px 20px 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.4);
}

.fp-main { flex: 1; display: flex; flex-direction: column; }
.fp-topbar {
    background: #fff;
    border-bottom: 2px solid var(--color-secondary);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fp-topbar .user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fp-topbar .role-badge {
    color: #fff;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    font-weight: 600;
    background: var(--color-secondary);
}
.role-badge.role-system-admin { background: var(--color-danger); }
.role-badge.role-store-manager { background: var(--color-primary); }
.role-badge.role-store-staff { background: var(--color-secondary); }
.role-badge.role-customer { background: var(--color-success); }

.fp-content { padding: 24px; flex: 1; }

/* ===== Status row colours =====
   Bootstrap 5 paints backgrounds on <td>/<th> via the --bs-table-bg
   variable, so a background on <tr> alone is hidden. Override the
   custom property AND set the cells directly so the colour wins
   regardless of which Bootstrap utility class is applied. */
.row-pass    { --bs-table-bg: var(--color-light-green); background-color: var(--color-light-green) !important; }
.row-warning { --bs-table-bg: var(--color-light-orange); background-color: var(--color-light-orange) !important; }
.row-fail    { --bs-table-bg: var(--color-light-red); background-color: var(--color-light-red) !important; }

.row-pass > td, .row-pass > th       { background-color: var(--color-light-green) !important; }
.row-warning > td, .row-warning > th { background-color: var(--color-light-orange) !important; }
.row-fail > td, .row-fail > th       { background-color: var(--color-light-red) !important; }

/* ===== Status badges (pill style) ===== */
.badge-pass {
    background-color: var(--color-success);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-block;
}
.badge-warning {
    background-color: var(--color-warning);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-block;
}
.badge-fail {
    background-color: var(--color-danger);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-block;
}

/* ===== Parameter value text colours ===== */
.param-pass    { color: var(--color-success); font-weight: 600; }
.param-warning { color: var(--color-warning); font-weight: 600; }
.param-fail    { color: var(--color-danger);  font-weight: 600; }

/* ===== Card headers ===== */
.card-header-primary { background-color: var(--color-primary)   !important; color: #fff !important; }
.card-header-teal    { background-color: var(--color-secondary) !important; color: #fff !important; }
.card-header-navy    { background-color: var(--color-navy)      !important; color: #fff !important; }
.card-header-green   { background-color: var(--color-success)   !important; color: #fff !important; }
.card-header-red     { background-color: var(--color-danger)    !important; color: #fff !important; }
.card-header-orange  { background-color: var(--color-warning)   !important; color: #fff !important; }

/* ===== Fish chips ===== */
.fish-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--color-light-blue);
    border: 1px solid var(--color-secondary);
    color: var(--color-primary);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    margin: 3px;
}
.fish-chip .remove-btn {
    background: none;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
}

/* ===== KPI stat cards (gradient style) ===== */
.kpi-card {
    border: none;
    border-radius: 12px;
    padding: 20px;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    height: 100%;
}
.kpi-card-blue  { background: linear-gradient(135deg, #0077B6, #00B4D8); }
.kpi-card-green { background: linear-gradient(135deg, #2DC653, #00B4D8); }
.kpi-card-red   { background: linear-gradient(135deg, #E63946, #FF6B35); }
.kpi-card-teal  { background: linear-gradient(135deg, #00B4D8, #03045E); }
.kpi-card-orange{ background: linear-gradient(135deg, #FF6B35, #FFB347); }
.kpi-card .kpi-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.kpi-card .kpi-label {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 4px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Legacy KPI variant for the old border-left style. Don't use for new pages. */
.kpi-card-legacy {
    border: none;
    border-left: 4px solid var(--color-primary);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    background: #fff;
    color: #1E2A3A;
}
.kpi-card-legacy .kpi-value { font-size: 2rem; font-weight: 700; color: var(--color-navy); }
.kpi-card-legacy .kpi-label { font-size: 0.85rem; color: #6b7785; text-transform: uppercase; letter-spacing: 0.4px; }
.kpi-card-legacy.kpi-success { border-left-color: var(--color-success); }
.kpi-card-legacy.kpi-warning { border-left-color: var(--color-warning); }
.kpi-card-legacy.kpi-danger  { border-left-color: var(--color-danger); }

/* ===== Alert panels ===== */
.alert-panel-red {
    background-color: var(--color-light-red);
    border-left: 4px solid var(--color-danger);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}
.alert-panel-orange {
    background-color: var(--color-light-orange);
    border-left: 4px solid var(--color-warning);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}
.alert-panel-green {
    background-color: var(--color-light-green);
    border-left: 4px solid var(--color-success);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

/* Legacy alert names */
.alert-critical { border-left: 4px solid var(--color-danger); }

/* ===== Section headers (gradient) ===== */
.section-header {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}
.section-header i { color: #fff; }

/* ===== Overall status banners ===== */
.status-banner-pass {
    background: linear-gradient(135deg, #2DC653, #00B4D8);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.status-banner-warning {
    background: linear-gradient(135deg, #FF6B35, #FFB347);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.status-banner-fail {
    background: linear-gradient(135deg, #E63946, #FF6B35);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.status-banner-grey {
    background: #6c757d;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
}

/* ===== Login page ===== */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #03045E 0%, #0077B6 50%, #00B4D8 100%);
}
.login-card {
    background: #fff;
    width: 100%;
    max-width: 420px;
    padding: 36px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.login-card .brand {
    text-align: center;
    margin-bottom: 24px;
}
.login-card .brand h1 {
    color: var(--color-navy);
    font-weight: 700;
    font-size: 1.6rem;
    margin: 8px 0 4px;
}
.login-card .brand .tagline { color: #6b7785; font-size: 0.85rem; }

/* ===== Forms ===== */
.form-control:focus, .form-select:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 0.2rem rgba(0, 180, 216, 0.2);
}

/* ===== Tables ===== */
.table thead {
    background: var(--color-primary);
    color: #fff;
}
/* Bootstrap 5.3 sets background-color directly on th/td (--bs-table-bg,
   defaults to white), which paints over the thead background above and
   leaves this white header text invisible. Set it on the cells too so it
   wins regardless of that per-cell background. */
.table thead th { font-weight: 600; border-bottom: 2px solid var(--color-secondary); color: #fff; background-color: var(--color-primary); }

.param-table tr:hover {
    background-color: var(--color-light-blue) !important;
    cursor: pointer;
}

/* Striped table — even rows get a subtle blue tint */
.table-fp-striped tr:nth-child(even) { background-color: #F8FBFF; }
.table-fp-striped tr:nth-child(odd)  { background-color: #FFFFFF; }

/* ===== Tank type tags (FishDatabase) ===== */
.tank-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-right: 3px;
}
.tank-tag-community { background: #E8F4FD; color: #0077B6; }
.tank-tag-tropical  { background: #FFE8DC; color: #FF6B35; }
.tank-tag-marine    { background: #D4F4F8; color: #00B4D8; }
.tank-tag-coldwater { background: #ECECF1; color: #495057; }
.tank-tag-brackish  { background: #FFE8C2; color: #B45309; }

/* ===== Dashboard scroll panels (v2.7) ===== */
.dashboard-scroll-panel {
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #00B4D8 #f0f0f0;
}

.dashboard-scroll-panel::-webkit-scrollbar {
    width: 6px;
}
.dashboard-scroll-panel::-webkit-scrollbar-track {
    background: #f0f0f0;
}
.dashboard-scroll-panel::-webkit-scrollbar-thumb {
    background: #00B4D8;
    border-radius: 3px;
}

/* Compact alert card used in the grouped Critical Alerts panel */
.alert-card-compact {
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: #fff;
    border-left: 4px solid var(--color-danger);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.alert-card-compact.severity-orange {
    border-left-color: var(--color-warning);
}
.alert-card-compact .alert-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.alert-card-compact .alert-card-title {
    font-weight: 600;
    color: var(--color-navy);
}
.alert-card-compact .alert-card-meta {
    font-size: 0.75rem;
    color: #6b7785;
}
.alert-card-compact .alert-card-params {
    font-size: 0.85rem;
    margin-bottom: 6px;
    color: #1E2A3A;
}
.alert-card-compact .alert-card-actions .btn {
    font-size: 0.72rem;
    padding: 2px 8px;
}

/* Treatment list items inside the schedule widget */
.treatment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
    border-left: 4px solid var(--color-primary);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.85rem;
}
.treatment-item.overdue { border-left-color: var(--color-danger); background: #fff5f5; }
.treatment-item.due-today { border-left-color: var(--color-warning); background: #fff8f0; }

.dashboard-card-equal {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.dashboard-card-equal .card-body { flex: 1; }

/* ===== Page header ===== */
.page-header {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e6ebf2;
}
.page-header h1 { color: var(--color-navy); font-weight: 600; font-size: 1.6rem; margin: 0; }
.page-header .breadcrumb { margin: 4px 0 0; padding: 0; background: none; font-size: 0.85rem; }