/* ============================================================================
   MOVASOL BRAND THEME
   Applies the official Movasol brand identity (Arculati kézikönyv) on top of the
   Limitless / Bootstrap 5.3 theme. This file is loaded AFTER the compiled theme
   CSS (see layouts/head-css.blade.php), so these rules win without a rebuild.

   Palette:  Seaweed Green #2FAD6F (primary) · Onyx #0F0F0F · Desert #F8F9F9
   Type:     Lato (brand web font)
   Features: brand recolor · dark mode ([data-color-theme="dark"]) · login scene
   ============================================================================ */

:root {
    /* ---- Brand palette ---- */
    --movasol-green:      #2FAD6F;
    --movasol-green-rgb:  47, 173, 111;
    --movasol-green-600:  #27975f;
    --movasol-green-700:  #1f8052;
    --movasol-green-300:  #5fc492;
    --movasol-green-100:  #e6f6ee;
    --movasol-onyx:       #0F0F0F;
    --movasol-onyx-rgb:   15, 15, 15;
    --movasol-desert:     #F8F9F9;

    /* ---- Map theme tokens to the brand ----
       This Limitless build strips the Bootstrap "bs-" prefix, so the live custom
       properties are --primary / --btn-bg / --link-color (NOT --bs-*). We set the
       unprefixed names (what the compiled theme actually reads) plus the prefixed
       ones as a harmless fallback. */
    --bs-body-font-family: 'Lato', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Limitless (unprefixed) — these drive the actual recolor */
    --primary:               #2FAD6F;
    --primary-rgb:           47, 173, 111;
    --link-color:            #27975f;
    --link-color-rgb:        39, 151, 95;
    --link-hover-color:      #1f8052;
    --component-active-bg:    #2FAD6F;   /* checkboxes, active nav, pagination, list-group, dropdowns */
    --component-active-color: #fff;
    --primary-text-emphasis: #1f8052;
    --primary-bg-subtle:     #e6f6ee;
    --primary-border-subtle: #bfe6d2;

    /* Bootstrap (prefixed) — fallback for any bs-prefixed consumers */
    --bs-primary:               #2FAD6F;
    --bs-primary-rgb:           47, 173, 111;
    --bs-link-color:            #27975f;
    --bs-link-color-rgb:        39, 151, 95;
    --bs-link-hover-color:      #1f8052;
    --bs-primary-text-emphasis: #1f8052;
    --bs-primary-bg-subtle:     #e6f6ee;
    --bs-primary-border-subtle: #bfe6d2;
}

/* ---- Typography: switch the whole UI to Lato ---- */
body {
    font-family: var(--bs-body-font-family);
}

/* ============================ Brand recolor ============================ */

/* Buttons (Bootstrap 5.3 per-variant CSS vars) */
.btn-primary {
    --btn-bg: var(--movasol-green);
    --btn-border-color: var(--movasol-green);
    --btn-hover-bg: var(--movasol-green-600);
    --btn-hover-border-color: var(--movasol-green-700);
    --btn-active-bg: var(--movasol-green-700);
    --btn-active-border-color: var(--movasol-green-700);
    --btn-disabled-bg: var(--movasol-green);
    --btn-disabled-border-color: var(--movasol-green);
    --btn-color: #fff;
    --btn-hover-color: #fff;
    --btn-active-color: #fff;
    --btn-disabled-color: #fff;
    --btn-focus-shadow-rgb: var(--movasol-green-rgb);
    /* prefixed fallback */
    --bs-btn-bg: var(--movasol-green);
    --bs-btn-border-color: var(--movasol-green);
    --bs-btn-hover-bg: var(--movasol-green-600);
    --bs-btn-hover-border-color: var(--movasol-green-700);
    --bs-btn-active-bg: var(--movasol-green-700);
    --bs-btn-active-border-color: var(--movasol-green-700);
}
.btn-outline-primary {
    --btn-color: var(--movasol-green-600);
    --btn-border-color: var(--movasol-green);
    --btn-hover-bg: var(--movasol-green);
    --btn-hover-border-color: var(--movasol-green);
    --btn-active-bg: var(--movasol-green);
    --btn-active-border-color: var(--movasol-green);
    --btn-hover-color: #fff;
    --btn-active-color: #fff;
    --btn-focus-shadow-rgb: var(--movasol-green-rgb);
}

/* Links */
a { color: var(--movasol-green-600); }
a:hover { color: var(--movasol-green-700); }

/* Primary utilities (Limitless compiles some of these without variables) */
.bg-primary    { background-color: var(--movasol-green) !important; }
.text-primary  { color: var(--movasol-green) !important; }
.border-primary{ border-color: var(--movasol-green) !important; }
.link-primary  { color: var(--movasol-green) !important; }
.bg-primary.bg-opacity-10 { background-color: rgba(var(--movasol-green-rgb), .1) !important; }
.bg-primary.bg-opacity-20 { background-color: rgba(var(--movasol-green-rgb), .2) !important; }
.text-bg-primary { background-color: var(--movasol-green) !important; color: #fff !important; }

/* Badges */
.badge.bg-primary { background-color: var(--movasol-green) !important; }

/* Alerts */
.alert-primary {
    --bs-alert-color: #155c3a;
    --bs-alert-bg: #e6f6ee;
    --bs-alert-border-color: #bfe6d2;
    --bs-alert-link-color: #103f29;
}

/* Form controls: green focus + checked states */
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--movasol-green-rgb), .65);
    box-shadow: 0 0 0 .2rem rgba(var(--movasol-green-rgb), .2);
}
.form-check-input:checked {
    background-color: var(--movasol-green);
    border-color: var(--movasol-green);
}
.form-check-input:focus {
    border-color: rgba(var(--movasol-green-rgb), .65);
    box-shadow: 0 0 0 .2rem rgba(var(--movasol-green-rgb), .2);
}
.form-switch .form-check-input:checked { background-color: var(--movasol-green); border-color: var(--movasol-green); }

/* Pagination / pills / list-group / dropdown / progress */
.page-link { color: var(--movasol-green-600); }
.page-item.active .page-link { background-color: var(--movasol-green); border-color: var(--movasol-green); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--movasol-green); }
.list-group-item.active { background-color: var(--movasol-green); border-color: var(--movasol-green); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--movasol-green); }
.progress-bar { background-color: var(--movasol-green); }

/* Text selection */
::selection { background: rgba(var(--movasol-green-rgb), .28); }

/* ============================ Top navbars ============================ */
/* App navbar + login navbar are .navbar-dark — make them Onyx with a green edge */
.navbar-dark {
    background-color: var(--movasol-onyx) !important;
}
/* higher specificity than the .border-bottom-white.border-opacity-10 utilities */
.navbar.navbar-dark.navbar-static {
    border-bottom: 1px solid rgba(var(--movasol-green-rgb), .40) !important;
}
.navbar-brand img { height: 34px; width: auto; }

/* ============================ Sidebar (dark) ============================ */
/* Green accent on the active / open navigation item */
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark .nav-sidebar > .nav-item-open > .nav-link {
    background-color: rgba(var(--movasol-green-rgb), .16);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--movasol-green);
}
.sidebar-dark .nav-sidebar .nav-link.active > i { color: var(--movasol-green); }
.sidebar-dark .nav-sidebar .nav-group-sub .nav-link.active {
    color: var(--movasol-green-300);
    background-color: rgba(var(--movasol-green-rgb), .12);
}

/* ============================ Dark mode polish ============================ */
/* Limitless ships the dark surfaces; we re-tint the accent green (brighter for
   contrast on dark) and keep an onyx feel. */
[data-color-theme="dark"] {
    --primary: #34c07b;
    --primary-rgb: 52, 192, 123;
    --link-color: #5fc492;
    --link-color-rgb: 95, 196, 146;
    --link-hover-color: #7fd3a8;
    --component-active-bg: #34c07b;
    --bs-primary: #34c07b;
    --bs-primary-rgb: 52, 192, 123;
}
[data-color-theme="dark"] .btn-primary {
    --btn-bg: #34c07b;
    --btn-border-color: #34c07b;
    --btn-hover-bg: #2aa86b;
    --btn-hover-border-color: #2aa86b;
    --btn-active-bg: #2aa86b;
    --btn-active-border-color: #2aa86b;
    --btn-color: #06140d;
    --btn-hover-color: #06140d;
    --btn-active-color: #06140d;
}
[data-color-theme="dark"] a { color: #5fc492; }
[data-color-theme="dark"] a:hover { color: #7fd3a8; }
/* a fenti link-szin NE fesse at a gombkent viselkedo <a>-kat (zold-a-zoldon Elonezet-bug):
   a gomb a sajat variansanak --btn-color-jat kapja vissza (primary sotetben #06140d, stb.) */
[data-color-theme="dark"] a.btn { color: var(--btn-color); }
[data-color-theme="dark"] a.btn:hover { color: var(--btn-hover-color); }
/* semleges (outline/white/light) <a> gombok sotetben a token-szoveget kapjak, mint a <button> parjaik */
[data-color-theme="dark"] a.btn.btn-outline-secondary,
[data-color-theme="dark"] a.btn.btn-white,
[data-color-theme="dark"] a.btn.btn-light { color: var(--mv-text); }
[data-color-theme="dark"] a.btn.btn-outline-secondary:hover,
[data-color-theme="dark"] a.btn.btn-white:hover,
[data-color-theme="dark"] a.btn.btn-light:hover { color: var(--mv-text); }
[data-color-theme="dark"] .text-primary { color: #34c07b !important; }
[data-color-theme="dark"] .sidebar-dark .nav-sidebar .nav-link.active > i { color: #34c07b; }

/* ============================ Login scene ============================ */
/* Onyx -> seaweed-green branded background with a subtle angular line motif
   echoing the logo's diamond "blades", plus a glassy green-edged card. */
.movasol-login {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 58px);
    padding: 48px 16px;
    background:
        radial-gradient(1100px 620px at 14% 8%,  rgba(47, 173, 111, .30), transparent 60%),
        radial-gradient(900px 520px at 112% 108%, rgba(47, 173, 111, .20), transparent 55%),
        linear-gradient(135deg, #0b0d0c 0%, #0F0F0F 42%, #102018 100%);
}
/* angular chevron pattern (the brand "blade" motif) */
.movasol-login::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .07;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='90'%20height='90'%20viewBox='0%200%2090%2090'%3E%3Cg%20fill='none'%20stroke='%232FAD6F'%20stroke-width='1.1'%3E%3Cpath%20d='M0%2045%20L45%200%20L90%2045'/%3E%3Cpath%20d='M0%2090%20L45%2045%20L90%2090'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 90px 90px;
}
/* soft top vignette so the navbar blends into the scene */
.movasol-login::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 160px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.45), transparent);
}

.movasol-login .login-form {
    position: relative;
    z-index: 2;
    width: 392px;
    max-width: 92vw;
}

/* Glassy, green-edged card */
.movasol-login .card {
    background: rgba(18, 22, 20, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(var(--movasol-green-rgb), .28);
    border-radius: 16px;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, .55),
        0 0 48px rgba(var(--movasol-green-rgb), .14);
    color: #e8eced;
}
.movasol-login .card-header {
    background: transparent !important;
    border-bottom: 0;
    padding-top: 1.75rem !important;
}
.movasol-login .card-header img { height: 52px; width: auto; }
.movasol-login .card-body { color: #cdd3d2; padding: 1.25rem 1.5rem 1.75rem; }
.movasol-login h5 { color: #fff; font-weight: 700; }
.movasol-login .text-muted { color: rgba(255, 255, 255, .5) !important; }
.movasol-login .form-label { color: #aeb6b4; font-weight: 600; }

.movasol-login .form-control {
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
}
.movasol-login .form-control::placeholder { color: rgba(255, 255, 255, .35); }
.movasol-login .form-control:focus {
    background-color: rgba(255, 255, 255, .08);
    border-color: var(--movasol-green);
    box-shadow: 0 0 0 .2rem rgba(var(--movasol-green-rgb), .25);
    color: #fff;
}
.movasol-login .form-control-feedback-icon { color: rgba(255, 255, 255, .5) !important; }
.movasol-login .form-check-label { color: rgba(255, 255, 255, .7); }
.movasol-login a { color: var(--movasol-green-300); }
.movasol-login a:hover { color: #8ad7b1; }

.movasol-login .btn-primary {
    --bs-btn-bg: var(--movasol-green);
    --bs-btn-hover-bg: var(--movasol-green-600);
    --bs-btn-active-bg: var(--movasol-green-700);
    padding: 8px 12px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 10px 24px rgba(var(--movasol-green-rgb), .35);
}

/* Tagline under the card */
.movasol-login .movasol-tagline {
    position: relative;
    z-index: 2;
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, .6);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    text-align: center;
}
.movasol-login .movasol-tagline span { color: var(--movasol-green-300); }

/* ============================================================================
   FORMS & TABLES POLISH
   Consistent control sizing, tidy DataTables rows/toolbar, aligned numbers,
   readable pagination, and a maxlength counter that no longer overlaps text.
   ============================================================================ */

/* ---- Consistent control height ---- */
.form-control,
.form-select { min-height: 36px; font-size: 13px; }
.form-control-sm,
.form-select-sm { min-height: 30px; font-size: 12px; }
textarea.form-control { min-height: 72px; }

/* Select2 single-select (filters) — line it up with .form-control */
.select2-container .select2-selection--single {
    height: 36px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(128, 134, 130, .40);
    border-radius: 4px;
    padding: 0 8px;
}
.select2-container--classic .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; }
.select2-container--open .select2-selection,
.select2-container--focus .select2-selection {
    border-color: var(--movasol-green) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--movasol-green-rgb), .2);
}

/* ---- Action icon buttons: consistent tap target ---- */
.btn-icon.btn-sm {
    width: 30px; height: 30px; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ---- DataTables: rows, header, alignment ---- */
table.dataTable tbody td { padding: 8px 10px; vertical-align: middle; }
table.dataTable thead th { padding: 10px; vertical-align: middle; font-weight: 600; white-space: nowrap; }
/* right-align numeric columns (DataTables tags them) + opt-in .num */
table.dataTable td.dt-type-numeric,
table.dataTable th.dt-type-numeric,
table.dataTable td.num, table.dataTable th.num,
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* opt-in truncation for long-text columns: add class="cell-truncate" */
table.dataTable td.cell-truncate { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- DataTables toolbar (DT 2.x .dt-* layout) ---- */
.dt-container .dt-layout-row { align-items: center; margin-bottom: 10px; row-gap: 8px; }
.dt-container .dt-search input {
    min-height: 36px;
    border: 1px solid rgba(128, 134, 130, .40);
    border-radius: 4px;
    padding: 4px 10px;
    margin-left: 6px;
}
.dt-container .dt-length select { min-height: 36px; padding: 4px 8px; }
.dt-container .dt-buttons .btn { margin-left: 4px; }
.dt-container .dt-info { font-size: 12px; opacity: .75; }

/* ---- Pagination: readable (undo the 10px override) + brand ---- */
.page-link { font-size: 13px; padding: 5px 10px; }
.dt-paging .page-link { min-width: 32px; text-align: center; }
.dt-container .dt-paging .dt-paging-button { padding: 0 !important; }

/* ---- Maxlength counter: drop below the field, reveal on focus ---- */
.custom-input-wrapper:has(> small[id$="_maxlength_counter"]) { padding-bottom: 16px !important; }
.custom-input-wrapper .form-control.pe-5 { padding-right: .75rem !important; }
.custom-input-wrapper small[id$="_maxlength_counter"] {
    top: auto !important;
    bottom: 0 !important;
    right: 2px !important;
    left: auto !important;
    transform: none !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.custom-input-wrapper:focus-within small[id$="_maxlength_counter"] { opacity: .8; }