/* === Self Service Area — Design Tokens === */
:root {
    --ssa-primary: #024699;
    --ssa-primary-light: #e8eef5;
    --ssa-primary-medium: #6b8fc4;
    --ssa-secondary: #d90d0b;
    --ssa-secondary-light: #fce8e8;
    --ssa-gray-50: #f5f6f8;
    --ssa-gray-100: #ebedf0;
    --ssa-gray-200: #d5d8dc;
    --ssa-gray-300: #b0b4ba;
    --ssa-gray-400: #8a8f96;
    --ssa-gray-500: #6b7078;
    --ssa-gray-600: #4a4f57;
    --ssa-gray-700: #2d3239;
    --ssa-text: #2d3239;
    --ssa-text-secondary: #6b7078;
}

/* === Typography === */
.section-title {
    font-size: 1rem;
    color: var(--ssa-gray-600);
    letter-spacing: 0.2px;
}

.page-title {
    font-size: 1.2rem;
    color: var(--ssa-text);
    letter-spacing: 0.3px;
}

/* === MudBlazor Overrides === */
.mud-dialog-width-sm {
    min-width: 800px !important;
    max-width: 800px !important;
    font-size: 0.8rem !important;
}

.mud-input-text { font-size: 0.8rem !important; }
.mud-input-label, .mud-expand-panel-text { font-size: 0.8rem !important; }
.mud-expand-panel .mud-expand-panel-header { padding: 0; background-color: var(--ssa-primary-light); border-radius: 5px; }
.mud-chip-content { width: 100%; }

/* === Compact Tables === */
.compact-table .mud-table-cell, .compact-table .mud-input-text { font-size: 0.8rem !important; }
.compact-table .mud-table-cell { padding: 4px 8px !important; }
.compact-table .mud-table-row { height: 1rem !important; }
.compact-table .mud-icon-button { width: 24px !important; height: 24px !important; }
.number-cell { text-align-last: end; }

/* === KPI Cards === */
.kpi-card {
    border-left: 3px solid var(--ssa-primary);
    transition: box-shadow 0.2s ease;
    border: 1px solid var(--ssa-gray-100);
    border-left: 3px solid var(--ssa-primary);
}
.kpi-card:hover { box-shadow: 0 2px 12px rgba(2, 70, 153, 0.08); }
.kpi-value { font-size: 1.5rem; color: var(--ssa-text); }
.kpi-label { font-size: 0.7rem; color: var(--ssa-gray-400); text-transform: uppercase; letter-spacing: 0.5px; }

/* === Status Chips === */
.status-new { background-color: var(--ssa-primary-light) !important; color: var(--ssa-primary) !important; }
.status-active { background-color: #e8f0e8 !important; color: #2d6a2d !important; }
.status-warning { background-color: #fef3e0 !important; color: #9a6700 !important; }
.status-danger { background-color: var(--ssa-secondary-light) !important; color: var(--ssa-secondary) !important; }
.status-neutral { background-color: var(--ssa-gray-100) !important; color: var(--ssa-gray-500) !important; }

/* === Cards === */
.hover-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
}
.hover-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(2, 70, 153, 0.08); }

.vessel-card { transition: box-shadow 0.2s ease; cursor: pointer; border: 1px solid var(--ssa-gray-100); }
.vessel-card:hover { box-shadow: 0 2px 12px rgba(2, 70, 153, 0.1); }

/* === Scrollbar === */
.custom-scroll { scrollbar-width: thin; scrollbar-color: var(--ssa-gray-300) transparent; }
.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background-color: var(--ssa-gray-300); border-radius: 3px; }
.custom-scroll::-webkit-scrollbar-button { display: none !important; }

/* === Tables === */
.no-row-lines .mud-table-row { border-bottom: none !important; }
.no-row-lines .mud-table-cell { border-bottom: none !important; }
.no-underline-on-blur .mud-input-root:not(.mud-input-focused)::before { border-bottom: none !important; }
.no-underline-on-blur .mud-input-root.mud-input-focused::before { border-bottom: 2px solid var(--ssa-primary) !important; }

/* === Selection === */
.selected { background-color: var(--ssa-primary) !important; margin: 4px; }
.selected > td { color: white !important; }
.selected > td .mud-input, .selected > td span { color: white !important; }

/* === Dialogs === */
.fixed-height-dialog { height: 70vh !important; max-height: 70vh !important; overflow-y: auto; }
.wide-dialog { width: 80vw !important; }

/* === Notifications === */
.notification-item { border-left: 3px solid transparent; transition: background-color 0.15s ease; padding: 12px 16px; }
.notification-item:hover { background-color: var(--ssa-gray-50); }
.notification-unread { border-left-color: var(--ssa-primary); background-color: rgba(2, 70, 153, 0.02); }

/* === Finance === */
.balance-positive { color: #2d6a2d; }
.balance-negative { color: var(--ssa-secondary); }

/* === Misc === */
.mud-icon-size-small { font-size: 1rem; }
.cursor-pointer { cursor: pointer; }
.stat-card { border: 1px solid var(--ssa-gray-100); text-align: center; }