@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');

/*
 * evoke plc instance theme
 * ------------------------------------------------------------------
 * Palette taken from the evoke plc corporate site theme
 * (application/themes/design_portfolio/css/theme.css):
 *
 *   navy         #373266   core brand / headings / chrome
 *   navy deep    #221f3e   gradient anchor, darkest text
 *   petrol teal  #007b6f   secondary brand, rules, hover accent
 *   blue slate   #4bb0c7   accent, stat values, CTA
 *   blue pastel  #9bd5e1   light accent, link hover on dark
 *   blue ice     #ddf4f9   tint / tag backgrounds
 *   gold         #b6a379   editorial accent
 *   grey light   #eff3f6   page background
 *
 * This file is the instance stylesheet (INSTANCE_STYLESHEET=default.css) and
 * loads after assets/css/style.bundle.css, so re-declaring Metronic's :root
 * custom properties re-skins buttons, badges, links, alerts, cards and the
 * ApexCharts widgets (they read --bs-* via KTUtil.getCssVariableValue) at once.
 *
 * Typography: evoke set their corporate type in Futura (FuturaMaxiLight /
 * FuturaMaxiProBold). Those are licensed webfonts served from evoke's own
 * domain and are not bundled here, so headings use Jost — an open geometric
 * sans cut from the same Futura lineage — while body and data text stay on
 * Inter, which master.blade.php already loads and which is far more legible at
 * table sizes. Delete the @import above and the --evoke-font-display line below
 * to drop back to Inter throughout; swap both for @font-face rules if the
 * licensed Futura files are ever added to assets/fonts.
 *
 * Vendor stylesheets (datatables etc.) load AFTER this file, which is why the
 * table header rules below carry !important.
 */

:root {
    /* --- evoke brand tokens ------------------------------------------- */
    --evoke-navy: #373266;
    --evoke-navy-dark: #221f3e;
    --evoke-navy-active: #2b2751;
    --evoke-navy-lift: #423c78;
    --evoke-navy-tint: #ecebf4;
    --evoke-teal: #007b6f;
    --evoke-teal-dark: #00655b;
    --evoke-teal-tint: #e5f2f1;
    --evoke-slate: #4bb0c7;
    --evoke-slate-dark: #3a94a9;
    --evoke-pastel: #9bd5e1;
    --evoke-ice: #ddf4f9;
    --evoke-gold: #b6a379;
    --evoke-gold-dark: #8a7442;
    --evoke-grey: #eff3f6;
    --evoke-mist: #dfe4ee;
    --evoke-periwinkle: #94abcc;

    /* Type */
    --evoke-font-display: 'Jost', 'Inter', Helvetica, sans-serif;

    /* The evoke site's signature motifs: a fading hairline rule and the
       navy-to-teal brand gradient. */
    --evoke-rule: linear-gradient(90deg, transparent, var(--evoke-teal) 50%, transparent);
    --evoke-rule-left: linear-gradient(90deg, var(--evoke-teal), rgba(0, 123, 111, 0) 70%);
    --evoke-brand-gradient: linear-gradient(90deg, var(--evoke-navy-dark) 0%, var(--evoke-navy) 45%, var(--evoke-teal) 100%);

    /* Elevation — navy-tinted so shadows read as part of the palette
       rather than as neutral grey smudges. */
    --evoke-shadow-xs: 0 1px 2px rgba(34, 31, 62, 0.05);
    --evoke-shadow-sm: 0 1px 2px rgba(34, 31, 62, 0.04), 0 3px 10px -2px rgba(34, 31, 62, 0.07);
    --evoke-shadow-md: 0 2px 4px rgba(34, 31, 62, 0.05), 0 12px 26px -8px rgba(34, 31, 62, 0.14);
    --evoke-shadow-lg: 0 4px 8px rgba(34, 31, 62, 0.06), 0 28px 56px -16px rgba(34, 31, 62, 0.24);
    --evoke-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Bootstrap / Metronic semantic colours ------------------------ */
    --bs-primary: #373266;
    --bs-primary-rgb: 55, 50, 102;
    --bs-primary-active: #2b2751;
    --bs-primary-light: #ecebf4;
    --bs-primary-inverse: #ffffff;

    --bs-secondary: #5b5676;
    --bs-secondary-rgb: 91, 86, 118;
    --bs-secondary-active: #474360;
    --bs-secondary-light: #eff3f6;
    --bs-secondary-inverse: #ffffff;

    /* Informational states borrow the slate/ice end of the palette */
    --bs-info: #4bb0c7;
    --bs-info-rgb: 75, 176, 199;
    --bs-info-active: #3a94a9;
    --bs-info-light: #ddf4f9;
    --bs-info-inverse: #ffffff;

    /* evoke's petrol teal reads as a positive state */
    --bs-success: #007b6f;
    --bs-success-rgb: 0, 123, 111;
    --bs-success-active: #00655b;
    --bs-success-light: #e5f2f1;
    --bs-success-inverse: #ffffff;

    /* Gold, darkened so white label text clears 3.6:1 */
    --bs-warning: #a97f2e;
    --bs-warning-rgb: 169, 127, 46;
    --bs-warning-active: #8a6725;
    --bs-warning-light: #f7f1e4;
    --bs-warning-inverse: #ffffff;

    /* The palette has no red; this one is tuned to sit beside the navy */
    --bs-danger: #cc2740;
    --bs-danger-rgb: 204, 39, 64;
    --bs-danger-active: #ad1f35;
    --bs-danger-light: #fceaed;
    --bs-danger-inverse: #ffffff;

    --bs-dark: #221f3e;
    --bs-dark-rgb: 34, 31, 62;
    --bs-dark-active: #14122a;
    --bs-dark-light: #eff3f6;
    --bs-dark-inverse: #ffffff;

    --bs-light: #f4f7f9;
    --bs-light-rgb: 244, 247, 249;
    --bs-light-active: #e6ecf1;
    --bs-light-inverse: #5b5676;

    --bs-link-color: #373266;
    --bs-link-color-rgb: 55, 50, 102;
    --bs-link-hover-color: #007b6f;
    --bs-link-hover-color-rgb: 0, 123, 111;

    /* --- Neutrals & surfaces ------------------------------------------
       Metronic's stock greys are warm-neutral; these are cooled toward the
       navy so every surface belongs to the same family. */
    --bs-body-color: #232135;
    --bs-heading-color: #373266;
    --bs-border-color: #dfe4ee;
    --bs-text-muted: #767e97;
    --bs-gray-500: #767e97;
    --bs-gray-600: #5f6884;

    --bs-app-bg-color: #eff3f6;
    --bs-app-blank-bg-color: #f4f7fa;

    /* Cards */
    --bs-card-border-color: #e6eaf3;
    --bs-card-border-radius: 0.85rem;
    --bs-card-inner-border-radius: calc(0.85rem - 1px);
    --bs-card-box-shadow: 0 1px 2px rgba(34, 31, 62, 0.04), 0 3px 10px -2px rgba(34, 31, 62, 0.07);

    /* Tables */
    --bs-table-border-color: #e6eaf3;
    --bs-table-striped-bg: #f7f9fc;
    --bs-table-hover-bg: #f2f8fb;

    /* Dropdowns & menus */
    --bs-dropdown-border-radius: 0.75rem;
    --bs-dropdown-box-shadow: 0 4px 8px rgba(34, 31, 62, 0.06), 0 28px 56px -16px rgba(34, 31, 62, 0.24);
    --bs-menu-link-color-active: #373266;
    --bs-menu-link-color-hover: #007b6f;
    --bs-menu-link-bg-color-active: #ecebf4;

    /* FullCalendar */
    --fc-event-bg-color: var(--evoke-navy);
    --fc-event-border-color: var(--evoke-navy);
    --fc-event-text-color: #ffffff;
    --fc-today-bg-color: var(--evoke-ice);

    /* Consumed by the other instance stylesheets; kept in sync here */
    --bg-card-heading: var(--evoke-navy);
    --text-card-heading: #ffffff;
    --bg-header: #ffffff;
    --btn-bg-primary: var(--evoke-navy);
}

/* ==================================================================
   Canvas
   ================================================================== */

/* A soft vertical wash instead of a flat grey field — the page reads as lit
   from the top, which is what stops a dense admin UI looking like a spreadsheet. */
body,
.app-default {
    background-image: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 40%, #e9eef5 100%);
    background-attachment: fixed;
}

/* ==================================================================
   Typography
   ================================================================== */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.card-label,
.page-heading,
.modal-title {
    font-family: var(--evoke-font-display);
    letter-spacing: -0.01em;
}

h1, .h1,
h2, .h2,
h3 {
    color: var(--evoke-navy);
    font-weight: 600;
}

/* evoke set their h4/h6 in petrol teal */
h4, .h4,
h6, .h6 {
    color: var(--evoke-teal);
    font-weight: 600;
}

.text-heading {
    color: var(--evoke-navy);
    font-weight: bold;
}

h3 .text-info {
    color: var(--evoke-navy) !important;
    font-weight: bold !important;
}

/* Large figures — evoke sets these in blue slate */
.stat-value,
.fs-2hx.text-primary,
.fs-2qx.text-primary {
    color: var(--evoke-slate) !important;
}

.stat-value,
.fs-2hx,
.fs-2qx,
.fs-3x {
    font-family: var(--evoke-font-display);
    letter-spacing: -0.02em;
}

/* Small uppercase labels give the data screens a reporting-pack feel */
.text-muted.text-uppercase,
.form-label.text-uppercase {
    letter-spacing: 0.08em;
    font-size: 0.8125rem;
}

/* Editorial pull-quote treatment from the corporate site */
blockquote {
    border: 0;
    color: var(--evoke-teal);
    font-weight: 700;
}

hr,
.separator {
    background: var(--evoke-rule);
    border: 0;
    height: 2px;
    opacity: 1;
}

a {
    transition: color 0.2s var(--evoke-ease);
}

/* ==================================================================
   App chrome — header
   ================================================================== */

/* The client logo is supplied for a light background, so the header band stays
   white and carries the brand through the gradient hairline beneath it. */
.app-header {
    background-color: #ffffff !important;
    border-bottom: 2px solid transparent;
    border-image: var(--evoke-rule) 30;
    box-shadow: 0 1px 3px rgba(34, 31, 62, 0.06);
}

.app-header-menu .menu > .menu-item > .menu-link,
#kt_header_menu .menu-title {
    color: var(--evoke-navy) !important;
    font-weight: 500;
}

.app-header-menu .menu > .menu-item > .menu-link {
    position: relative;
}

/* evoke's nav links sweep a gradient rule in on hover */
.app-header-menu .menu > .menu-item > .menu-link::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.35rem;
    height: 2px;
    background: linear-gradient(90deg, var(--evoke-teal), var(--evoke-slate));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s var(--evoke-ease);
}

.app-header-menu .menu > .menu-item > .menu-link:hover::after,
.app-header-menu .menu > .menu-item.here > .menu-link::after,
.app-header-menu .menu > .menu-item.show > .menu-link::after {
    transform: scaleX(1);
}

.app-header-menu .menu > .menu-item > .menu-link:hover .menu-title,
.app-header-menu .menu > .menu-item.here > .menu-link .menu-title,
.app-header-menu .menu > .menu-item.show > .menu-link .menu-title {
    color: var(--evoke-teal) !important;
}

.main-header-logo {
    height: 60px;
    padding: 3px;
}

/* ==================================================================
   App chrome — toolbar (the signature evoke navy band)
   ================================================================== */

#kt_app_toolbar,
.app-toolbar {
    position: relative;
    color: #ffffff !important;
    background-color: var(--evoke-navy) !important;
    /* Two soft light sources over a navy ramp — a CSS stand-in for the swirl
       artwork evoke run behind their own page headers. */
    background-image:
        radial-gradient(120% 180% at 88% -40%, rgba(75, 176, 199, 0.38) 0%, rgba(75, 176, 199, 0) 55%),
        radial-gradient(90% 150% at 10% 140%, rgba(0, 123, 111, 0.45) 0%, rgba(0, 123, 111, 0) 60%),
        linear-gradient(100deg, #221f3e 0%, #373266 58%, #3f3a7b 100%) !important;
}

#kt_app_toolbar::after,
.app-toolbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--evoke-teal) 0%, var(--evoke-slate) 45%, var(--evoke-pastel) 70%, rgba(155, 213, 225, 0) 100%);
}

#kt_app_toolbar h1,
#kt_app_toolbar .page-heading,
.app-toolbar h1 {
    color: #ffffff !important;
    font-weight: 600;
}

#kt_app_toolbar .btn-clean,
.app-toolbar .btn-clean,
#kt_app_toolbar .text-muted,
.app-toolbar .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

#kt_app_toolbar .subheader-separator,
.app-toolbar .subheader-separator {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* --- Breadcrumbs (sit on the navy band) ----------------------------- */
.breadcrumb {
    color: #ffffff !important;
}

.breadcrumb-item {
    box-shadow: none !important;
    color: #ffffff;
    background-color: transparent !important;
}

.breadcrumb-item a {
    box-shadow: none !important;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 3px 6px;
    border-radius: 0.35rem;
    transition: all 0.2s var(--evoke-ease);
}

.breadcrumb-item a:hover {
    background-color: #ffffff !important;
    color: var(--evoke-navy) !important;
    font-weight: 600;
}

/* ==================================================================
   Surfaces
   ================================================================== */

/*.card {*/
/*    transition: box-shadow 0.25s var(--evoke-ease), transform 0.25s var(--evoke-ease), border-color 0.25s var(--evoke-ease);*/
/*}*/

/*.card:hover {*/
/*    transform: translateY(-2px);*/
/*    border-color: #d8dfee;*/
/*    box-shadow: var(--evoke-shadow-md);*/
/*}*/

/* Modals and print output shouldn't float */
.modal .card:hover {
    transform: none;
    box-shadow: var(--bs-card-box-shadow);
}

/* Card headings carry the evoke hairline rule, fading out to the right */
.card > .card-header {
    border-bottom: 2px solid transparent;
    border-image: var(--evoke-rule-left) 30;
}

.card > .card-header .card-title,
.card > .card-header .card-label {
    color: var(--evoke-navy);
    font-weight: 600;
}

.card .card-header.bg-primary,
.card .card-header.card-header-primary {
    background-image: linear-gradient(100deg, var(--evoke-navy-dark), var(--evoke-navy) 70%, #3f3a7b);
    color: var(--text-card-heading) !important;
    border-image: none;
}

.card .card-header.bg-primary .card-title,
.card .card-header.bg-primary .card-label {
    color: var(--text-card-heading);
}

/* Avatars / initials get a brand ring */
.symbol .symbol-label {
    box-shadow: inset 0 0 0 1px rgba(55, 50, 102, 0.08);
}

/* ==================================================================
   Buttons
   ================================================================== */

.btn {
    transition: background-color 0.2s var(--evoke-ease), border-color 0.2s var(--evoke-ease),
                color 0.2s var(--evoke-ease), box-shadow 0.2s var(--evoke-ease), transform 0.15s var(--evoke-ease);
}

.btn:focus-visible {
    outline: 2px solid var(--evoke-slate);
    outline-offset: 2px;
}

.btn.btn-primary {
    background-image: linear-gradient(180deg, var(--evoke-navy-lift) 0%, var(--evoke-navy) 100%);
    box-shadow: 0 1px 2px rgba(34, 31, 62, 0.12), 0 4px 12px -4px rgba(55, 50, 102, 0.45);
}

/* evoke's CTA sweeps from its base colour to petrol teal on hover */
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.active,
.btn.btn-primary.show,
.show > .btn.btn-primary {
    color: #ffffff;
    border-color: var(--evoke-teal);
    background-color: var(--evoke-teal);
    background-image: linear-gradient(180deg, #04897b 0%, var(--evoke-teal) 100%);
    box-shadow: 0 2px 4px rgba(34, 31, 62, 0.12), 0 8px 20px -6px rgba(0, 123, 111, 0.5);
}

.btn.btn-primary:hover:not(.btn-active) {
    transform: translateY(-1px);
}

.btn.btn-primary:active:not(.btn-active) {
    transform: translateY(0);
}

.btn.btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: #ffffff !important;
    box-shadow: var(--evoke-shadow-xs);
}

.btn.btn-secondary:hover:not(.btn-active),
.btn.btn-secondary:focus:not(.btn-active),
.btn.btn-secondary:active:not(.btn-active) {
    background-color: var(--bs-secondary-active) !important;
    border-color: var(--bs-secondary-active) !important;
    color: #ffffff !important;
}

.btn.btn-light,
.btn.btn-light-primary {
    box-shadow: var(--evoke-shadow-xs);
}

.btn.btn-outline.btn-outline-primary {
    border-color: var(--evoke-navy);
    color: var(--evoke-navy);
}

.btn.btn-outline.btn-outline-primary:hover:not(.btn-active) {
    border-color: var(--evoke-teal);
    background-color: var(--evoke-teal);
    color: #ffffff;
}

/* ==================================================================
   Forms
   ================================================================== */

.form-label {
    color: var(--evoke-navy-dark) !important;
    font-weight: 500;
}

.form-control,
.form-select {
    border-color: var(--evoke-mist);
    border-radius: 0.6rem;
    transition: border-color 0.2s var(--evoke-ease), box-shadow 0.2s var(--evoke-ease);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--evoke-slate);
    box-shadow: 0 0 0 0.2rem rgba(75, 176, 199, 0.18);
}

.form-control-solid {
    background-color: #f4f7fa;
    border-color: transparent;
}

.form-control-solid:focus {
    background-color: #ffffff;
}

.form-check-input:checked {
    background-color: var(--evoke-navy);
    border-color: var(--evoke-navy);
}

/* ==================================================================
   Tables — vendor CSS loads after this file, hence !important
   ================================================================== */

.table > thead > tr > th {
    background-color: #f4f7fa !important;
    color: var(--evoke-navy) !important;
    font-family: var(--evoke-font-display);
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--evoke-teal) !important;
}

.table > tbody > tr {
    transition: background-color 0.15s var(--evoke-ease);
}

.table.table-row-bordered > tbody > tr > td,
.table > tbody > tr > td {
    border-bottom-color: var(--bs-table-border-color);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
    color: var(--bs-body-color);
}

/* ==================================================================
   Badges, alerts, tabs, pagination, dropdowns, modals
   ================================================================== */

.badge {
    border-radius: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge.badge-light-info {
    background-color: var(--evoke-ice);
    color: var(--evoke-teal);
}

/* A brand accent bar makes alerts read as deliberate, not default */
.alert {
    border-radius: 0.75rem;
    border-left: 4px solid var(--evoke-navy);
    box-shadow: var(--evoke-shadow-xs);
}

.alert.alert-primary { border-left-color: var(--evoke-navy); }
.alert.alert-success { border-left-color: var(--evoke-teal); }
.alert.alert-info { border-left-color: var(--evoke-slate); }
.alert.alert-warning { border-left-color: var(--bs-warning); }
.alert.alert-danger { border-left-color: var(--bs-danger); }

.nav-line-tabs .nav-item .nav-link {
    color: var(--bs-gray-600);
    font-weight: 500;
    transition: color 0.2s var(--evoke-ease), border-color 0.2s var(--evoke-ease);
}

.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
    border-bottom-width: 2px;
    border-bottom-color: var(--evoke-teal);
    color: var(--evoke-navy);
}

.nav-pills .nav-link {
    border-radius: 0.6rem;
}

.nav-pills .nav-link.active {
    background-image: linear-gradient(180deg, var(--evoke-navy-lift), var(--evoke-navy));
    color: #ffffff;
}

.page-link {
    border-radius: 0.5rem;
    transition: all 0.2s var(--evoke-ease);
}

.page-item.active .page-link {
    background-image: linear-gradient(180deg, var(--evoke-navy-lift), var(--evoke-navy));
    color: #ffffff;
}

.page-item:not(.active) .page-link:hover {
    background-color: var(--evoke-ice);
    color: var(--evoke-navy);
}

.dropdown-menu {
    border: 1px solid #e6eaf3;
}

.dropdown-menu .menu-link:hover,
.dropdown-menu .menu-item .menu-link.active {
    background-color: var(--evoke-navy-tint) !important;
    color: var(--evoke-navy) !important;
}

.modal-content {
    border: 0;
    border-radius: 1rem;
    box-shadow: var(--evoke-shadow-lg);
    overflow: hidden;
}

/* Headers marked .border-0 in this app are title-less (a close button only), so
   they are left alone — a navy band with nothing in it reads as a glitch. */
.modal-header:not(.border-0) {
    background-image: linear-gradient(100deg, var(--evoke-navy-dark) 0%, var(--evoke-navy) 65%, #3f3a7b 100%);
    border-bottom: 0;
}

.modal-header:not(.border-0) .modal-title,
.modal-header:not(.border-0) h1,
.modal-header:not(.border-0) h2,
.modal-header:not(.border-0) h3,
.modal-header:not(.border-0) h4,
.modal-header:not(.border-0) h5,
.modal-header:not(.border-0) .btn.btn-icon i,
.modal-header:not(.border-0) .btn.btn-icon .svg-icon {
    color: #ffffff !important;
}

.modal-header:not(.border-0) .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.modal-header:not(.border-0) .btn-close:hover {
    opacity: 1;
}

.progress {
    border-radius: 1rem;
    background-color: var(--evoke-grey);
}

.progress-bar {
    background-image: linear-gradient(90deg, var(--evoke-navy), var(--evoke-teal));
}

/* Text selection */
::selection {
    background-color: rgba(155, 213, 225, 0.4);
}

/* Scrollbars in brand neutrals */
* {
    scrollbar-color: #c3ccdd transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c3ccdd;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--evoke-slate);
    background-clip: content-box;
}

/* ==================================================================
   Sign-in page
   ================================================================== */

/* Replaces the stock Metronic artwork panel with the evoke brand gradient,
   textured with the same soft light sources used on the toolbar. */
#kt_app_root > div > .bgi-size-cover.bgi-position-center {
    background-image:
        radial-gradient(70% 55% at 78% 12%, rgba(75, 176, 199, 0.42) 0%, rgba(75, 176, 199, 0) 60%),
        radial-gradient(80% 60% at 10% 95%, rgba(0, 123, 111, 0.5) 0%, rgba(0, 123, 111, 0) 62%),
        linear-gradient(160deg, var(--evoke-navy-dark) 0%, var(--evoke-navy) 55%, #0d5f63 100%) !important;
}

/* On the navy panel the full-strength brand gold reads better (4.7:1) than the
   darkened gold used for white-on-colour badges. */
#kt_app_root > div > .bgi-size-cover.bgi-position-center .text-warning {
    color: var(--evoke-gold) !important;
}

/* Lift the form off the canvas as a card */
#kt_sign_in_form {
    background-color: #ffffff;
    border: 1px solid #e6eaf3;
    border-radius: 1rem;
    box-shadow: var(--evoke-shadow-md);
    padding: 2.5rem;
}

#kt_sign_in_submit {
    background-color: var(--evoke-navy) !important;
    background-image: linear-gradient(180deg, var(--evoke-navy-lift), var(--evoke-navy)) !important;
    border-color: var(--evoke-navy) !important;
    color: #ffffff !important;
}

#kt_sign_in_submit:hover {
    background-color: var(--evoke-teal) !important;
    background-image: linear-gradient(180deg, #04897b, var(--evoke-teal)) !important;
    border-color: var(--evoke-teal) !important;
    color: #ffffff !important;
}

#navigate-to-password-reset {
    color: var(--evoke-navy) !important;
}

#navigate-to-password-reset:hover {
    color: var(--evoke-teal) !important;
    text-decoration: underline !important;
}

#kt_sign_in_form .form-control {
    background-color: #f4f7fa;
    border-color: var(--evoke-mist);
}

/* ==================================================================
   Notices
   ================================================================== */

#anniversary-strip {
    background: var(--evoke-brand-gradient);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#anniversary-strip .emoji { font-size: 18px; margin-top: -5px; }
#anniversary-strip p { font-size: 18px; color: rgba(255, 255, 255, 0.9); margin-bottom: 0; }
#anniversary-strip strong { color: #fff; font-weight: 600; }
#anniversary-strip .dismiss { margin-left: auto; color: rgba(255, 255, 255, 0.55); font-size: 20px; cursor: pointer; line-height: 1; }

.tooltip .tooltip-inner {
    max-width: 500px !important;
    min-width: 250px !important;
}

/* ==================================================================
   Accessibility & print
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
    .card,
    .btn,
    .page-link,
    .breadcrumb-item a,
    .app-header-menu .menu > .menu-item > .menu-link::after {
        transition: none !important;
    }

    .card:hover,
    .btn.btn-primary:hover:not(.btn-active) {
        transform: none !important;
    }
}

/* This stylesheet is also loaded by the generated timesheet documents
   (app/Services/TimesheetService.php), so flatten the decoration for print. */
@media print {
    body,
    .app-default {
        background-image: none !important;
        background-color: #ffffff !important;
    }

    .card,
    .modal-content,
    #kt_sign_in_form {
        box-shadow: none !important;
    }

    #kt_app_toolbar,
    .app-toolbar,
    .modal-header,
    .card .card-header.bg-primary {
        background-image: none !important;
        background-color: var(--evoke-navy) !important;
    }
}