/*
 |--------------------------------------------------------------------------
 | Wadan UOS - brand layer
 |--------------------------------------------------------------------------
 | Hand written. Holds the palette tokens plus the pieces of chrome the
 | generated recolour cannot express (gradients, logo lock-ups, the theme
 | switch, dark-mode corrections).
 |
 | Load order:
 |   style.css
 |   brand/brand.generated.css      <- machine recolour of style.css
 |   brand/brand.css                <- this file
 |   layouts/dark.css               [toggled]
 |   brand/brand-dark.generated.css [toggled]
 |
 | Dark-only rules here are scoped with `body.theme-dark`, so they outrank the
 | plain `body`/`.card` selectors in dark.css no matter the source order.
 */

:root {
    --wadan-50: #eef0fd;
    --wadan-100: #d9ddf9;
    --wadan-200: #a6aeee;
    --wadan-300: #7a86e0;
    --wadan-400: #5668cd; /* logo gradient start */
    --wadan-500: #4c58c4; /* primary */
    --wadan-600: #3d46a0;
    --wadan-700: #323275; /* logo gradient end */
    --wadan-800: #2c2f5e;
    --wadan-900: #23264a;

    --wadan-gradient: linear-gradient(135deg, #5668cd 0%, #323275 100%);
    --wadan-gradient-soft: linear-gradient(135deg, #6472d6 0%, #3d46a0 100%);

    --wadan-success: #1de9b6;
    --wadan-warning: #f4c22b;
    --wadan-danger: #f44236;
    --wadan-info: #5b67d8;

    --wadan-surface: #ffffff;
    --wadan-surface-alt: #f4f5fb;
    --wadan-body-bg: #f1f2f8;
    --wadan-text: #37395c;
    --wadan-text-muted: #7b7fa3;
    --wadan-border: #e4e6f2;
    --wadan-ring: rgba(76, 88, 196, 0.25);
}

body.theme-dark {
    --wadan-surface: #1c1e3a;
    --wadan-surface-alt: #23264a;
    --wadan-body-bg: #14152a;
    --wadan-text: #b4bad6;
    --wadan-text-muted: #8a91b8;
    --wadan-border: #2a2e52;
    --wadan-ring: rgba(122, 134, 224, 0.35);
}

/* ==========================================================================
   Chrome: sidebar, header, brand lock-up
   ========================================================================== */

.pcoded-navbar,
.pcoded-navbar.navbar-lightblue {
    background: linear-gradient(180deg, #2b2f5e 0%, #23264a 100%);
}

.pcoded-navbar .navbar-brand.header-logo,
.pcoded-navbar[class*="brand-"] .header-logo {
    background: var(--wadan-gradient);
}

/* The sidebar lock-up is the white-on-indigo variant, so it needs room to
   breathe rather than the stock 40px strip. */
.pcoded-navbar .header-logo .b-brand {
    padding: 0;
}

.pcoded-navbar .header-logo .b-brand img {
    max-height: 42px;
    max-width: 190px;
    width: auto;
    object-fit: contain;
}

.pcoded-navbar.navbar-collapsed .header-logo .b-brand img {
    max-width: 42px;
}

.pcoded-header[class*="header-"],
.pcoded-header.header-lightblue {
    background: var(--wadan-gradient-soft);
}

.pcoded-header .m-header .b-brand img {
    max-height: 32px;
    width: auto;
}

.pcoded-header .topbar-title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: #fff;
}

/* Active sidebar item: indigo pill instead of the stock slate block. */
.pcoded-navbar .pcoded-inner-navbar > li.active > a,
.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a,
.pcoded-navbar.active-lightblue .pcoded-inner-navbar > li.active > a,
.pcoded-navbar.active-lightblue .pcoded-inner-navbar > li.pcoded-trigger > a {
    background: rgba(122, 134, 224, 0.18);
    color: #fff;
}

.pcoded-navbar.active-lightblue .pcoded-inner-navbar > li.active:after,
.pcoded-navbar.active-lightblue .pcoded-inner-navbar > li.pcoded-trigger:after {
    background-color: var(--wadan-200);
}

.pcoded-navbar .pcoded-inner-navbar li.active > a,
.pcoded-navbar .pcoded-inner-navbar li:focus > a,
.pcoded-navbar .pcoded-inner-navbar li:hover > a {
    color: #fff;
}

.pcoded-navbar.title-lightblue .pcoded-inner-navbar .pcoded-menu-caption {
    color: var(--wadan-200);
}

/* ==========================================================================
   Controls
   ========================================================================== */

a {
    color: var(--wadan-500);
}

a:hover,
a:focus {
    color: var(--wadan-600);
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--wadan-500);
    border-color: var(--wadan-500);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--wadan-600);
    border-color: var(--wadan-600);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem var(--wadan-ring);
}

.form-control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--wadan-300);
    box-shadow: 0 0 0 0.2rem var(--wadan-ring);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--wadan-500);
    color: #fff;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--wadan-500);
    border-color: var(--wadan-600);
    color: #fff;
}

.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--wadan-500) !important;
    border-color: var(--wadan-500) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--wadan-100) !important;
    border-color: var(--wadan-200) !important;
    color: var(--wadan-700) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--wadan-600);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--wadan-500);
    color: #fff;
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--wadan-500);
}

.badge-primary,
.label.label-primary {
    background-color: var(--wadan-500);
}

.progress-bar {
    background-color: var(--wadan-500);
}

.table thead th {
    color: var(--wadan-700);
    border-bottom-color: var(--wadan-border);
}

/* ==========================================================================
   Auth screens (login, password reset)
   ========================================================================== */

.auth-wrapper {
    background: linear-gradient(135deg, #eef0fd 0%, #dfe3fa 100%);
}

.auth-wrapper .auth-bg .r {
    background: var(--wadan-400);
}

.auth-wrapper .auth-bg .r:first-child {
    background: var(--wadan-500);
}

.auth-wrapper .auth-bg .r:last-child {
    background: var(--wadan-700);
}

.auth-wrapper .auth-bg .r.s {
    background: var(--wadan-300);
}

.auth-wrapper .auth-bg .r.s:nth-child(2) {
    background: var(--wadan-600);
}

/* System lock-up sits top-left on the auth screen. */
.auth-logo img {
    max-height: 74px !important;
    max-width: 260px !important;
    width: auto;
}

.auth-brand-footer {
    margin-top: 18px;
    font-size: 12px;
    color: var(--wadan-text-muted);
}

.auth-brand-footer strong {
    color: var(--wadan-600);
}

/* ==========================================================================
   Theme switch
   ========================================================================== */

.theme-switch > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.theme-switch > a:hover {
    background-color: rgba(255, 255, 255, 0.16);
}

.theme-switch .theme-switch-icon-dark {
    display: none;
}

body.theme-dark .theme-switch .theme-switch-icon-dark {
    display: inline-block;
}

body.theme-dark .theme-switch .theme-switch-icon-light {
    display: none;
}

/* ==========================================================================
   Dark mode corrections
   ========================================================================== */

body.theme-dark {
    background: var(--wadan-body-bg);
    color: var(--wadan-text);
}

body.theme-dark .card,
body.theme-dark .pcoded-inner-content .card {
    background: var(--wadan-surface);
    border-color: var(--wadan-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.theme-dark .card .card-header {
    border-bottom-color: var(--wadan-border);
}

body.theme-dark .form-control,
body.theme-dark .custom-select,
body.theme-dark .select2-container--default .select2-selection--single,
body.theme-dark .select2-container--default .select2-selection--multiple,
body.theme-dark .select2-dropdown {
    background-color: var(--wadan-surface-alt);
    border-color: var(--wadan-border);
    color: var(--wadan-text);
}

body.theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--wadan-text);
}

body.theme-dark .table,
body.theme-dark .table td,
body.theme-dark .table th {
    color: var(--wadan-text);
    border-color: var(--wadan-border);
}

body.theme-dark .table thead th {
    color: var(--wadan-200);
}

body.theme-dark .table-hover tbody tr:hover {
    background-color: rgba(122, 134, 224, 0.08);
    color: var(--wadan-text);
}

body.theme-dark .dropdown-menu {
    background: var(--wadan-surface);
    border-color: var(--wadan-border);
    color: var(--wadan-text);
}

body.theme-dark .dropdown-menu a,
body.theme-dark .dropdown-menu > li > a {
    color: var(--wadan-text);
}

body.theme-dark .breadcrumb,
body.theme-dark .page-header {
    background: transparent;
}

body.theme-dark .modal-content {
    background: var(--wadan-surface);
    color: var(--wadan-text);
}

body.theme-dark a {
    color: var(--wadan-300);
}

body.theme-dark .text-muted {
    color: var(--wadan-text-muted) !important;
}

body.theme-dark .auth-wrapper {
    background: linear-gradient(135deg, #191b33 0%, #23264a 100%);
}

body.theme-dark .auth-wrapper .card {
    background: var(--wadan-surface);
}

/* Datatables paints its own chrome; keep it on-palette in dark. */
body.theme-dark .dataTables_wrapper,
body.theme-dark .dataTables_wrapper .dataTables_info,
body.theme-dark .dataTables_wrapper .dataTables_length,
body.theme-dark .dataTables_wrapper .dataTables_filter {
    color: var(--wadan-text);
}

body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--wadan-text) !important;
    background: transparent !important;
    border-color: var(--wadan-border) !important;
}

/* ==========================================================================
   Print: documents carry the client's identity, never the system's chrome.
   ========================================================================== */

@media print {
    .pcoded-navbar,
    .pcoded-header,
    .theme-switch {
        display: none !important;
    }
}

/* ==========================================================================
   Vendor credit
   ========================================================================== */

.wadan-powered-by {
    padding: 18px 0 26px;
    font-size: 12px;
    letter-spacing: 0.2px;
}

.wadan-powered-by a,
.wadan-powered-by strong {
    color: var(--wadan-500);
    font-weight: 600;
}

body.theme-dark .wadan-powered-by a,
body.theme-dark .wadan-powered-by strong {
    color: var(--wadan-300);
}

@media print {
    .wadan-powered-by {
        display: none !important;
    }
}

/* ==========================================================================
   Settings: system vs client ownership
   ========================================================================== */

.wadan-setting-nav {
    border-bottom: 1px solid var(--wadan-border);
}

.wadan-setting-nav .nav-link {
    padding: 12px 20px;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    color: var(--wadan-text-muted);
    line-height: 1.3;
}

.wadan-setting-nav .nav-link i {
    margin-right: 6px;
}

.wadan-setting-nav .nav-link:hover {
    color: var(--wadan-500);
}

.wadan-setting-nav .nav-link.active {
    color: var(--wadan-600);
    background: transparent;
    border-bottom-color: var(--wadan-500);
    font-weight: 600;
}

.wadan-setting-nav .nav-link small {
    font-weight: 400;
}

/* Brand file previews - the dark tile shows the reversed lock-up honestly. */
.brand-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--wadan-border);
    border-radius: 6px;
}

.brand-preview img {
    max-width: 100%;
    max-height: 68px;
}

.brand-preview-light {
    background: #ffffff;
}

.brand-preview-dark {
    background: var(--wadan-gradient);
    border-color: transparent;
}

body.theme-dark .brand-preview-light {
    background: #ffffff;
}

/* ==========================================================================
   Dark mode: surfaces the stock dark layout leaves untouched
   ========================================================================== */

/* dark.css only repaints `body`; the content shell keeps its light default. */
body.theme-dark .pcoded-main-container,
body.theme-dark .pcoded-wrapper,
body.theme-dark .pcoded-content,
body.theme-dark .pcoded-inner-content,
body.theme-dark .main-body,
body.theme-dark .page-wrapper {
    background: var(--wadan-body-bg);
}

/* Gradient stat cards: dark.css repaints `.card` and flattens them, so put
   the brand gradients back at a specificity it cannot beat. */
body.theme-dark .card.theme-bg,
body.theme-dark .theme-bg {
    background: linear-gradient(-135deg, #1de9b6 0%, #5b67d8 100%);
}

body.theme-dark .card.theme-bg2,
body.theme-dark .theme-bg2 {
    background: linear-gradient(-135deg, #7e8ad6 0%, #8b7bd8 100%);
}

body.theme-dark .card.theme-bg h4,
body.theme-dark .card.theme-bg h6,
body.theme-dark .card.theme-bg p,
body.theme-dark .card.theme-bg2 h4,
body.theme-dark .card.theme-bg2 h6,
body.theme-dark .card.theme-bg2 p {
    color: #fff;
}

/* Solid utility backgrounds on cards (.bg-c-blue and friends) are likewise
   flattened by dark.css's `.card` rule. */
body.theme-dark .card.bg-c-blue {
    background: var(--wadan-500);
}

body.theme-dark .card.bg-c-green {
    background: #1de9b6;
}

body.theme-dark .card.bg-c-yellow {
    background: #f4c22b;
}

body.theme-dark .card.bg-c-red {
    background: #f44236;
}

body.theme-dark .card.bg-c-purple {
    background: #8b7bd8;
}

body.theme-dark .input-group-text {
    background-color: var(--wadan-surface-alt);
    border-color: var(--wadan-border);
    color: var(--wadan-text);
}

body.theme-dark .input-group-text i {
    color: var(--wadan-text-muted);
}

body.theme-dark .input-group-text i:hover {
    color: var(--wadan-200);
}

/* Auth card accent icon: stock gradient is teal->cyan. */
.auth-wrapper .auth-icon:before {
    background: var(--wadan-gradient-soft);
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-wrapper .card a {
    color: var(--wadan-500);
}

body.theme-dark .auth-wrapper .card a {
    color: var(--wadan-300);
}