/* ============================================================
   Admin "soft" theme for the after-login app.
   Matches the admin login aesthetic: generous rounding + soft
   shadows + tinted inputs. Colours are unchanged — everything is
   derived from the existing --theme-base (emerald). Loaded LAST in
   admin/head_import.php so it overrides the compiled Bootstrap in
   custom.css. Admin-only (company does not load this file).
   ============================================================ */
:root{
    --primary-border-radius: 16px;                       /* rounder cards (used inline by components) */
    --soft-radius:   16px;
    --soft-radius-sm:12px;
    --soft-tint: color-mix(in srgb, var(--theme-base) 8%, #fff);
    --soft-shadow:    0 10px 28px -14px rgba(20,50,40,.18), 0 2px 6px rgba(20,50,40,.05);
    --soft-shadow-lg: 0 30px 60px -26px rgba(16,40,30,.30), 0 8px 20px -12px rgba(16,40,30,.12);
    --soft-cta-shadow: 0 12px 24px -10px color-mix(in srgb, var(--theme-base) 60%, transparent);
    /* a touch more of the brand tint behind the floating cards */
    --page-bg: color-mix(in srgb, var(--theme-base) 11%, #fff);
}

/* ---- cards ---- */
.card{
    border:0 !important;
    border-radius:var(--primary-border-radius) !important;
    box-shadow:var(--soft-shadow) !important;
}
/* shadow utilities → unify to the soft shadow */
.shadow-sm, .shadow{ box-shadow:var(--soft-shadow) !important; }

/* ---- buttons ---- */
.btn{ border-radius:var(--soft-radius-sm) !important; font-weight:600; }
.btn-sm{ border-radius:9px !important; }
.btn-lg{ border-radius:var(--soft-radius) !important; }
.btn-primary{ box-shadow:var(--soft-cta-shadow); transition:box-shadow .15s ease, background-color .15s ease, transform .05s ease; }
.btn-primary:hover{ box-shadow:0 16px 30px -10px color-mix(in srgb, var(--theme-base) 60%, transparent); }
.btn-primary:active{ transform:translateY(1px); }

/* ---- form controls ---- */
.form-control, .form-select{
    border-radius:var(--soft-radius-sm) !important;
    border-color:transparent !important;
    background-color:var(--soft-tint) !important;
    transition:background-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus{
    background-color:#fff !important;
    border-color:transparent !important;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--theme-base) 25%, transparent) !important;
}
.form-control::placeholder{ color:color-mix(in srgb, #14241d 38%, transparent); }
.input-group{ border-radius:var(--soft-radius-sm); }
.input-group > .form-control:not(:last-child){ border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; }
.input-group > .btn{ border-radius:0 var(--soft-radius-sm) var(--soft-radius-sm) 0 !important; }

/* ---- modals ---- */
.modal-content{ border:0 !important; border-radius:20px !important; box-shadow:var(--soft-shadow-lg) !important; }
/* Inputs on the white modal surface need an explicit outline — the faint tint alone
   (fine on the page, where cards add surrounding contrast) reads as nearly invisible here. */
.modal .form-control, .modal .form-select{
    border-color: color-mix(in srgb, var(--theme-base) 30%, #fff) !important;
}
.modal .form-control:focus, .modal .form-select:focus{
    border-color: color-mix(in srgb, var(--theme-base) 55%, #fff) !important;
}

/* Searchable dropdown (SearchSelect) — its default control is styled for plain Bootstrap (white / grey
   border / small radius), which clashes with the soft-theme's tinted, rounded, borderless inputs. Match it
   to .form-control/.form-select so the widget is indistinguishable from a native field. */
.ss-control{
    border-radius:var(--soft-radius-sm) !important;
    border-color:transparent !important;
    background:var(--soft-tint) !important;
}
.ss-label.ss-placeholder{ color:color-mix(in srgb, #14241d 38%, transparent) !important; }
.modal .ss-control{ border-color: color-mix(in srgb, var(--theme-base) 30%, #fff) !important; }

/* ---- dropdowns / popovers ---- */
.dropdown-menu{ border:0 !important; border-radius:14px !important; box-shadow:var(--soft-shadow) !important; padding:6px; }
.dropdown-item{ border-radius:9px; }

/* ---- misc surfaces ---- */
.badge{ border-radius:8px; }
.alert{ border-radius:14px; border:0; box-shadow:var(--soft-shadow); }
.list-group{ border-radius:var(--soft-radius-sm); overflow:hidden; }
.nav-pills .nav-link{ border-radius:10px; }
.table{ border-radius:var(--soft-radius-sm); overflow:hidden; }