/*
Nordic / Muji-like Unified Preview
- Main palette: blue + gray
- Button semantics:
  - Add/New/Create: deep green outline on white
  - Cancel/Close: red outline on white
  - Confirm: light green outline on white
  - Filter actions: unified blue-gray style
*/

:root {
    --n-bg: #d9e4ee;
    --n-surface: #ffffff;
    --n-surface-soft: #eef3f7;
    --n-border: #aebdca;
    --n-border-strong: #8094a5;
    --n-text: #172634;
    --n-text-soft: #445b70;

    --n-blue: #3f607c;
    --n-blue-dark: #2f4d66;
    --n-blue-soft: #dce7f0;

    --n-green-add: #2f6b45;
    --n-green-add-soft: #e9f3ed;
    --n-green-confirm: #4c9a68;
    --n-green-confirm-soft: #ecf7f0;

    --n-red-cancel: #b25555;
    --n-red-cancel-soft: #f9eded;

    --n-radius: 8px;
}

/* Global atmosphere (logged-in area) */
body {
    background: #ffffff;
    color: var(--n-text);
}

#sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--n-border-strong) !important;
    box-shadow: 2px 0 8px rgba(26, 45, 62, 0.08) !important;
}

#sidebar .nav-link,
#sidebar .dropdown-toggle {
    color: #1f3648 !important;
    background: #ffffff !important;
    border: 1px solid #c7d4e0 !important;
    border-radius: var(--n-radius) !important;
    font-weight: 700 !important;
}

#sidebar .nav-link.active,
#sidebar .nav-link:hover,
#sidebar .dropdown-toggle:hover,
#sidebar .nav-pills .nav-link.active,
#sidebar .dropdown.show > .dropdown-toggle {
    color: #ffffff !important;
    background: #4c6f8d !important;
    border-color: #6f8ea8 !important;
}

#sidebar .dropdown-menu {
    background: #f4f8fc !important;
    border: 1px solid #b7c7d5 !important;
}

#sidebar .dropdown-item {
    color: #1f3648 !important;
    background: #ffffff !important;
}

#sidebar .dropdown-item:hover,
#sidebar .dropdown-item:focus {
    background: #d9e8f5 !important;
    color: #21455f !important;
}

#sidebar .dropdown-item.active,
#sidebar .dropdown-item:active {
    color: #ffffff !important;
    background: #4c6f8d !important;
}

#breadcrumb {
    background-color: var(--n-blue-dark) !important;
}

#main-content {
    background-color: #ffffff !important;
    color: var(--n-text) !important;
}

#main-content .card,
#main-content .shadow-box,
#main-content .modal-content {
    background-color: var(--n-surface) !important;
    border: 1px solid var(--n-border-strong) !important;
    border-radius: var(--n-radius) !important;
    box-shadow: 0 6px 18px rgba(34, 52, 68, 0.12) !important;
}

/* Unified base button style */
#main-content .btn {
    border-radius: var(--n-radius);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-width: 2px;
    background-color: #fff;
    transition: all 0.18s ease;
}

#main-content .btn:focus,
#main-content .btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(47, 77, 102, 0.26);
}

/* Default semantic mapping to blue-gray tone */
#main-content .btn-primary,
#main-content .btn-outline-primary,
#main-content .btn-info,
#main-content .btn-outline-info {
    color: var(--n-blue-dark);
    background-color: #fff;
    border-color: var(--n-blue);
}

#main-content .btn-primary:hover,
#main-content .btn-outline-primary:hover,
#main-content .btn-info:hover,
#main-content .btn-outline-info:hover {
    color: var(--n-blue-dark);
    background-color: var(--n-blue-soft);
    border-color: var(--n-blue-dark);
}

/* Add/New/Create buttons: deep green */
#main-content .btn[id*="add"],
#main-content .btn[id*="new"],
#main-content .btn[id*="create"] {
    color: var(--n-green-add) !important;
    background-color: #fff !important;
    border-color: var(--n-green-add) !important;
}

#main-content .btn[id*="add"]:hover,
#main-content .btn[id*="new"]:hover,
#main-content .btn[id*="create"]:hover {
    color: var(--n-green-add) !important;
    background-color: #deefe4 !important;
    border-color: var(--n-green-add) !important;
}

/* Confirm buttons: lighter green */
#main-content .btn[id*="confirm"],
#main-content .btn[id*="save"] {
    color: var(--n-green-confirm) !important;
    background-color: #fff !important;
    border-color: var(--n-green-confirm) !important;
}

#main-content .btn[id*="confirm"]:hover,
#main-content .btn[id*="save"]:hover {
    color: var(--n-green-confirm) !important;
    background-color: #dff1e5 !important;
    border-color: var(--n-green-confirm) !important;
}

/* Cancel / Close buttons: red */
#main-content .btn[id*="cancel"],
#main-content .btn[id*="close"],
#logout-button {
    color: var(--n-red-cancel) !important;
    background-color: #fff !important;
    border-color: var(--n-red-cancel) !important;
}

#main-content .btn[id*="cancel"]:hover,
#main-content .btn[id*="close"]:hover,
#logout-button:hover {
    color: var(--n-red-cancel) !important;
    background-color: #f6e3e3 !important;
    border-color: var(--n-red-cancel) !important;
}

/* Filter buttons: fully unified blue-gray */
#main-content .btn[id*="filter"],
#main-content .btn[id*="volatility"],
#main-content .btn#btn-all-customers,
#main-content .btn#btn-unreminded-customers,
#main-content .btn#btn-reminded-customers,
#main-content .btn#toggle-date-filter-btn,
#main-content .btn#toggle-view-btn {
    color: var(--n-blue-dark) !important;
    background-color: #fff !important;
    border-color: var(--n-blue) !important;
}

#main-content .btn[id*="filter"]:hover,
#main-content .btn[id*="volatility"]:hover,
#main-content .btn#btn-all-customers:hover,
#main-content .btn#btn-unreminded-customers:hover,
#main-content .btn#btn-reminded-customers:hover,
#main-content .btn#toggle-date-filter-btn:hover,
#main-content .btn#toggle-view-btn:hover {
    color: var(--n-blue-dark) !important;
    background-color: #d4e2ee !important;
    border-color: var(--n-blue-dark) !important;
}

/* Selected filter state (when not outline) */
#main-content .btn[id*="filter"].btn-primary:not(.btn-outline-primary),
#main-content .btn[id*="volatility"].btn-primary:not(.btn-outline-primary),
#main-content .btn#btn-all-customers.btn-primary:not(.btn-outline-primary),
#main-content .btn#btn-unreminded-customers.btn-primary:not(.btn-outline-primary),
#main-content .btn#btn-reminded-customers.btn-primary:not(.btn-outline-primary) {
    color: #fff !important;
    background-color: var(--n-blue) !important;
    border-color: var(--n-blue) !important;
}

/* Keep destructive intent visible */
#main-content .btn[id*="delete"],
#main-content .btn[id*="remove"],
#main-content .btn-danger,
#main-content .btn-outline-danger {
    color: var(--n-red-cancel) !important;
    background-color: #fff !important;
    border-color: var(--n-red-cancel) !important;
}

#main-content .btn[id*="delete"]:hover,
#main-content .btn[id*="remove"]:hover,
#main-content .btn-danger:hover,
#main-content .btn-outline-danger:hover {
    color: var(--n-red-cancel) !important;
    background-color: var(--n-red-cancel-soft) !important;
    border-color: var(--n-red-cancel) !important;
}

/* Table/header polish for Nordic consistency */
#main-content table thead th {
    background-color: #cddce8 !important;
    color: var(--n-text) !important;
    border-color: var(--n-border-strong) !important;
}

#main-content table tbody td {
    border-color: #d7e0e8 !important;
}