/* ============================================================
 * Vizii — modern.css
 * Restores form/button styling after Tailwind preflight reset
 * + light, modern UI polish (no logic / layout changes)
 * Loaded AFTER tailwind.css and legacy CSS.
 * ============================================================ */

:root {
    --vz-primary: #36225f;
    --vz-primary-strong: #4b2e84;
    --vz-primary-soft: #f3edff;
    --vz-border: #e3e1ea;
    --vz-border-strong: #cfcad8;
    --vz-muted: #6b7280;
    --vz-bg-soft: #f7f6fb;
    --vz-radius: 10px;
    --vz-shadow-sm: 0 1px 2px rgba(17, 12, 46, .04), 0 0 1px rgba(17, 12, 46, .06);
    --vz-shadow-md: 0 4px 18px rgba(54, 34, 95, .08), 0 1px 2px rgba(17, 12, 46, .04);
}

/* --- General typography polish --- */
body {
    background: var(--vz-bg-soft);
    color: #2c2742;
    font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { color: #2c2742; }

/* --- Form inputs (restores look after Tailwind preflight) ---
 * Rules use :not([class*="..."]) so any Tailwind utility (pl-*, py-*, w-[..],
 * border-*, rounded-*, bg-*) wins over these defaults instead of being overridden.
 */
input[type="text"]:not([class*="w-["]):not([class*="border"]):not([class*="rounded"]),
input[type="email"]:not([class*="border"]):not([class*="rounded"]),
input[type="password"]:not([class*="border"]):not([class*="rounded"]),
input[type="search"]:not([class*="border"]):not([class*="rounded"]),
input[type="number"]:not([class*="w-["]):not([class*="border"]):not([class*="rounded"]),
input[type="tel"]:not([class*="border"]):not([class*="rounded"]),
input[type="url"]:not([class*="border"]):not([class*="rounded"]),
input[type="date"]:not([class*="border"]):not([class*="rounded"]),
input[type="datetime-local"]:not([class*="border"]):not([class*="rounded"]),
input[type="time"]:not([class*="border"]):not([class*="rounded"]),
input[type="month"]:not([class*="border"]):not([class*="rounded"]),
textarea:not([class*="border"]):not([class*="rounded"]),
select:not(.selectpicker):not(.no-modern):not([multiple]):not([class*="border"]):not([class*="rounded"]) {
    width: 100%;
    min-height: 40px;
    background: #fff;
    color: #1f2937;
    border: 1px solid var(--vz-border);
    border-radius: var(--vz-radius);
    box-shadow: var(--vz-shadow-sm);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    font-size: 14px;
    line-height: 1.4;
}

/* Padding only when no Tailwind padding utility is set on the input.
 * Skip checkbox/radio so they keep their fixed pixel size (otherwise the
 * 12px horizontal padding makes the box wider than tall and offsets the
 * absolutely-centered .peer-checked SVG checkmark on /reports etc.) */
input:not([type="checkbox"]):not([type="radio"]):not([class*="p-"]):not([class*="pl-"]):not([class*="pr-"]):not([class*="px-"]):not([class*="py-"]):not([class*="pt-"]):not([class*="pb-"]):not([class*="w-["]),
textarea:not([class*="p-"]):not([class*="pl-"]):not([class*="pr-"]):not([class*="px-"]):not([class*="py-"]):not([class*="pt-"]):not([class*="pb-"]),
select:not(.selectpicker):not(.no-modern):not([multiple]):not([class*="p-"]):not([class*="pl-"]):not([class*="pr-"]):not([class*="px-"]):not([class*="py-"]):not([class*="pt-"]):not([class*="pb-"]) {
    padding: 8px 12px;
}

textarea { min-height: 96px; resize: vertical; }

input:not([class*="border"]):focus,
textarea:not([class*="border"]):focus,
select:not(.selectpicker):not(.no-modern):not([class*="border"]):focus {
    border-color: var(--vz-primary-strong);
    box-shadow: 0 0 0 3px rgba(75, 46, 132, .18);
}

input::placeholder, textarea::placeholder { color: #9ca3af; }

input[disabled], textarea[disabled], select[disabled] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Tiny inline numeric inputs (e.g. price[N]) — keep small but visible */
input.w-\[40px\],
input.w-\[60px\],
input.w-\[80px\] {
    height: 32px;
    padding: 4px 6px;
    border: 1px solid var(--vz-border);
    border-radius: 8px;
    background: #fff;
    text-align: right;
    font-size: 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input.w-\[40px\]:focus,
input.w-\[60px\]:focus,
input.w-\[80px\]:focus {
    border-color: var(--vz-primary-strong);
    box-shadow: 0 0 0 2px rgba(75, 46, 132, .18);
    outline: none;
}

/* Native select chevron — only when the page hasn't already styled it
 * (skip when the markup uses Tailwind appearance-none or bg-transparent;
 *  those pages already render their own absolute-positioned SVG chevron) */
select:not(.selectpicker):not([multiple]):not(.no-modern):not([class*="appearance-none"]):not([class*="bg-transparent"]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}

/* Form-control bootstrap-compatible alias */
.form-control {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    background: #fff;
    color: #1f2937;
    border: 1px solid var(--vz-border);
    border-radius: var(--vz-radius);
    box-shadow: var(--vz-shadow-sm);
    font-size: 14px;
}
.form-control:focus {
    border-color: var(--vz-primary-strong);
    box-shadow: 0 0 0 3px rgba(75, 46, 132, .18);
    outline: none;
}

/* --- Checkboxes & Radios (modern, consistent across all pages) --- */
input[type="checkbox"]:not(.no-modern),
input[type="radio"]:not(.no-modern) {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0 4px 0 0;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
    vertical-align: middle;
    position: relative;
    flex-shrink: 0;
    box-shadow: var(--vz-shadow-sm);
}
input[type="checkbox"]:not(.no-modern) { border-radius: 5px; }
input[type="radio"]:not(.no-modern)    { border-radius: 50%; }

/* Honor explicit Tailwind sizing if present */
input[type="checkbox"].h-5, input[type="radio"].h-5 { height: 20px; }
input[type="checkbox"].w-5, input[type="radio"].w-5 { width: 20px; }

input[type="checkbox"]:not(.no-modern):hover,
input[type="radio"]:not(.no-modern):hover {
    border-color: var(--vz-primary-strong);
    box-shadow: var(--vz-shadow-md);
}

input[type="checkbox"]:not(.no-modern):checked,
input[type="radio"]:not(.no-modern):checked {
    background: var(--vz-primary);
    border-color: var(--vz-primary);
}

/* Skip our ::after checkmark when the markup is the .peer overlay pattern
 * (those pages render their own absolute SVG check via peer-checked) */
input[type="checkbox"]:not(.no-modern):not(.peer):checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}
input[type="radio"]:not(.no-modern):checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}

input[type="checkbox"]:not(.no-modern):focus-visible,
input[type="radio"]:not(.no-modern):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(75, 46, 132, .25);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    background: #f3f4f6;
    cursor: not-allowed;
    opacity: .6;
}

/* --- Buttons ---
 * Default look only when no Tailwind bg utility is set
 * (so bg-[#36225f], bg-purple-700, etc. win cleanly).
 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.2;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease, filter .15s ease;
    box-shadow: var(--vz-shadow-sm);
}
.btn:not([class*="bg-"]):not(.btn-danger) {
    background: #fff;
    color: #1f2937;
    border-color: var(--vz-border);
}
.btn:hover { box-shadow: var(--vz-shadow-md); }
.btn[class*="bg-"]:hover { filter: brightness(0.93); }
.btn:active { transform: translateY(1px); }
.btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(75, 46, 132, .25); }

/* Force readable text when a colored bg utility is present */
.btn[class*="bg-"].text-white,
.btn[class*="bg-"].text-white:hover,
.btn[class*="bg-"].text-white:focus,
.btn[class*="bg-"].text-white:focus-within { color: #fff !important; }

/* Danger button polish (logout) */
.btn.btn-danger {
    background: #ef4444;
    color: #fff;
    border-color: #dc2626;
}
.btn.btn-danger:hover { background: #dc2626; filter: none; }

/* --- Header --- */
header.w-full.bg-white {
    background: #fff;
    box-shadow: 0 1px 0 var(--vz-border);
    padding-top: 14px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    align-items: center;
}
header.w-full.bg-white form button[type="submit"] {
    box-shadow: none;
}
header .text-gray-500 b { color: var(--vz-primary); }

/* --- Saites (Header links) panel: keep readable, fix collapse --- */
#header-links-panel {
    width: max-content;
    max-width: min(800px, calc(100vw - 24px));
    min-width: 600px;
}
@media (max-width: 640px) {
    #header-links-panel {
        min-width: 90vw;
        max-width: 95vw;
    }
}
#header-links-panel a.block {
    transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#header-links-panel a.block:hover {
    transform: translateY(-1px);
    box-shadow: var(--vz-shadow-md);
}

/* --- Main menu (top tabs) modernized --- */
/* responsive.css hides .main-menu-area at ≤991px expecting a .mobile-menu-area
 * that no longer exists — override so the flex nav is always visible */
.main-menu-area {
    display: block !important;
    margin: 8px 0 24px !important;
}
@media (max-width: 991px) {
    .content-area { margin-left: 16px !important; margin-right: 16px !important; }
    .nav-tabs.notika-menu-wrap { justify-content: center; }
}
.nav-tabs.notika-menu-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--vz-border);
    border-radius: 14px;
    padding: 6px;
    box-shadow: var(--vz-shadow-sm);
    justify-content: center;
}
.nav-tabs.notika-menu-wrap > li { margin: 0; float: none; }
.nav-tabs.notika-menu-wrap > li > a {
    padding: 9px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500;
    color: #4b5563 !important;
    transition: background .15s ease, color .15s ease;
}
.nav-tabs.notika-menu-wrap > li > a:hover {
    background: var(--vz-primary-soft) !important;
    color: var(--vz-primary) !important;
}
.nav-tabs.notika-menu-wrap > li.active > a,
.nav-tabs.notika-menu-wrap > li.active > a:focus,
.nav-tabs.notika-menu-wrap > li.active > a:hover {
    background: var(--vz-primary) !important;
    color: #fff !important;
}

/* --- Panels (cards) --- */
.panel {
    background: #fff;
    border: 1px solid var(--vz-border);
    border-radius: 14px;
    box-shadow: var(--vz-shadow-sm);
}
.panel-content { padding: 16px; }

/* Unified panel look for pages that don't wrap their content in .panel yet.
 * Targets only direct children of .content-area (no double-wrapping).
 * .wrap pages that already have .panel or .panel-content as a direct child
 * are skipped — they handle their own card styling. */
.content-area > .col-lg-12.col-md-12.col-sm-12.col-xs-12,
.content-area > .wrap:not(.no-auto-panel):not(:has(> .panel)):not(:has(> .panel-content)) {
    background: #fff;
    border: 1px solid var(--vz-border);
    border-radius: 14px;
    box-shadow: var(--vz-shadow-sm);
    padding: 24px 32px 28px;
    margin-bottom: 24px;
}

/* --- Tables: cleaner rows --- */
.table-responsive { border-radius: 12px; }
.table thead th {
    background: #faf8ff;
    color: #4b3978;
    font-weight: 600;
    border-bottom: 1px solid var(--vz-border) !important;
}
/* Subtle row hover: use brightness so colored rows (bg-red-200, bg-yellow-200, ...) just get slightly darker instead of being overridden to white */
.table tbody tr {
    transition: filter .12s ease, background-color .12s ease;
}
.table tbody tr:hover { filter: brightness(0.96); }
.table tbody tr:not([class*="bg-"]):hover {
    background-color: #fbfaff;
    filter: none;
}
.table td, .table th { vertical-align: middle !important; }

/* --- Footer --- */
.footer-copyright-area {
    background: var(--vz-primary);
    color: #e9e3ff;
    padding: 14px 0;
    margin-top: 32px;
}
.footer-copyright-area .footer-copy-right p { color: #e9e3ff !important; margin: 0; text-align: center; }
.footer-copyright-area a { color: #c7b6ff; }
.footer-copyright-area a:hover { color: #fff; text-decoration: underline; }

/* --- Login page polish --- */
.vz-login-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 60px -20px rgba(54, 34, 95, .25), 0 12px 32px -12px rgba(54, 34, 95, .15);
    overflow: hidden;
}

/* --- Misc UX polish --- */
a { transition: color .15s ease; }
.alert { border-radius: 10px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Ensure scrollUp button doesn't overlap chat-style widgets */
#scrollUp { right: 16px !important; bottom: 16px !important; }

/* --- Mobile menu open look --- */
#mobile-menu ul li a { transition: background .15s ease, color .15s ease; }

/* iCheck recovery: keep checkboxes visible if plugin missing */
.i-checks input[type="checkbox"], .i-checks input[type="radio"] {
    width: 16px; height: 16px; vertical-align: middle;
}