/* ==========================================================================
   Rahatam admin — theme refresh + Lucide icon sizing
   Loaded last (see resources/views/layouts/include.blade.php) so it can refine
   the purchased template without editing the 800KB style.min.css.
   Keep this file additive and low-risk: the template is Bootstrap-4 era and
   relies on its own class names.
   ========================================================================== */

/* --- Lucide icons ---------------------------------------------------------
   Lucide blade components render inline SVG with stroke="currentColor".
   Size them relative to the surrounding font so they behave like the
   Font Awesome glyphs they replace. */
.lucide-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex: 0 0 auto;
}

/* Equivalents for the Font Awesome sizing helpers that have no Lucide
   counterpart. Apply alongside .lucide-icon, e.g. class="lucide-icon icon-lg". */
.lucide-icon.icon-fw  { width: 1.25em; text-align: center; }
.lucide-icon.icon-lg  { width: 1.33em; height: 1.33em; vertical-align: -0.2em; }
.lucide-icon.icon-2x  { width: 2em; height: 2em; vertical-align: -0.35em; }
.lucide-icon.icon-3x  { width: 3em; height: 3em; vertical-align: -0.5em; }
.lucide-icon.icon-spin { animation: lucide-icon-spin 2s linear infinite; }

/* Same size helpers, but for font-based icon sets that are still in use
   (e.g. the few mdi glyphs). Scoped with :not() so they never change the em
   basis of an inline SVG. */
.icon-fw:not(.lucide-icon)   { display: inline-block; width: 1.25em; text-align: center; }
.icon-lg:not(.lucide-icon)   { font-size: 1.33em; }
.icon-2x:not(.lucide-icon)   { font-size: 2em; }
.icon-3x:not(.lucide-icon)   { font-size: 3em; }
.icon-spin:not(.lucide-icon) { animation: lucide-icon-spin 2s linear infinite; }

@keyframes lucide-icon-spin {
    to { transform: rotate(360deg); }
}

/* --- Password reveal toggle ----------------------------------------------
   The old markup swapped Font Awesome classes on a single <i> via jQuery.
   Inline SVG cannot work that way, so both states are rendered and the
   wrapper's .is-visible class decides which one shows. */
.password-toggle {
    cursor: pointer;
}

.password-toggle .password-toggle-on {
    display: none;
}

.password-toggle.is-visible .password-toggle-off {
    display: none;
}

.password-toggle.is-visible .password-toggle-on {
    display: inline-flex;
}

/* --- Design tokens --------------------------------------------------------
   --theme-color is injected at runtime from system settings
   (layouts/include.blade.php), so it is deliberately NOT redefined here. */
:root {
    --refresh-radius: 12px;
    --refresh-radius-sm: 8px;
    --refresh-border: rgba(16, 24, 40, .07);
    --refresh-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px rgba(16, 24, 40, .05);
    --refresh-shadow-hover: 0 2px 4px rgba(16, 24, 40, .07), 0 12px 24px rgba(16, 24, 40, .09);
}

/* --- Shape ---------------------------------------------------------------- */
.card {
    border: 1px solid var(--refresh-border);
    border-radius: var(--refresh-radius);
    box-shadow: var(--refresh-shadow);
    transition: box-shadow .18s ease;
}

.card:hover {
    box-shadow: var(--refresh-shadow-hover);
}

.card .card-title,
.card .card-header {
    font-weight: 600;
}

.btn {
    border-radius: var(--refresh-radius-sm);
    font-weight: 500;
}

.form-control,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--refresh-radius-sm);
}

.dropdown-menu,
.modal-content,
.offcanvas {
    border-radius: var(--refresh-radius);
}

.dropdown-menu {
    border-color: var(--refresh-border);
    box-shadow: var(--refresh-shadow);
}

/* --- Chrome --------------------------------------------------------------- */
.navbar.default-layout-navbar {
    box-shadow: 0 1px 0 var(--refresh-border);
}

.table thead th {
    font-size: .76rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
}

.table-hover tbody tr:hover {
    background-color: rgba(16, 24, 40, .025);
}

/* --- Dark mode ------------------------------------------------------------
   The template ships a .dark-mode body class; soften our light-theme
   surfaces so they do not glare. */
body.dark-mode .card {
    border-color: rgba(255, 255, 255, .06);
    box-shadow: none;
}