/*
 * Kiure Engineering — Unfold Admin Custom Theme
 * Light: Red / White / Gray
 * Dark:  Yellow / Charcoal / Black
 */

/* ══════════════════════════════════════════════
   SIDEBAR BACKGROUND
══════════════════════════════════════════════ */

html:not(.dark) #nav-sidebar,
html:not(.dark) [data-sidebar] {
    background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%) !important;
    border-right: 1px solid #fecaca !important;
}

html.dark #nav-sidebar,
html.dark [data-sidebar] {
    background: linear-gradient(180deg, #1c1914 0%, #141210 100%) !important;
    border-right: 1px solid #2e2a1e !important;
}

/* ══════════════════════════════════════════════
   SIDEBAR LOGO
══════════════════════════════════════════════ */

.sidebar-logo img,
[data-sidebar] img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════
   NAV ITEMS
══════════════════════════════════════════════ */

/* Light */
html:not(.dark) .navigation-item a {
    color: #374151 !important;
    transition: all 0.2s ease;
}

html:not(.dark) .navigation-item a:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #b91c1c !important;
    border-radius: 6px;
    transform: translateX(4px);
}

html:not(.dark) .navigation-item a.active {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #b91c1c !important;
    border-radius: 6px;
    border-left: 3px solid #dc2626;
}

/* Dark */
html.dark .navigation-item a {
    color: #d6d0c4 !important;
    transition: all 0.2s ease;
}

html.dark .navigation-item a:hover {
    background: rgba(250, 204, 21, 0.1) !important;
    color: #facc15 !important;
    border-radius: 6px;
    transform: translateX(4px);
}

html.dark .navigation-item a.active {
    background: rgba(250, 204, 21, 0.15) !important;
    color: #facc15 !important;
    border-radius: 6px;
    border-left: 3px solid #facc15;
}

/* ══════════════════════════════════════════════
   SIDEBAR SECTION HEADERS & CHEVRONS
══════════════════════════════════════════════ */

/* Light */
html:not(.dark) .navigation-title {
    color: #991b1b !important;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

html:not(.dark) .navigation-title button svg {
    color: #991b1b !important;
}

/* Dark */
html.dark .navigation-title {
    color: #ca8a04 !important;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

html.dark .navigation-title button svg {
    color: #ca8a04 !important;
}

/* ══════════════════════════════════════════════
   TOP HEADER BAR
══════════════════════════════════════════════ */

html:not(.dark) #header {
    background: #ffffff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid #e5e7eb;
}

html.dark #header {
    background: #1c1914;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid #2e2a1e;
}

/* Light brand text */
html:not(.dark) #header .site-name,
html:not(.dark) #header h1 a {
    background: linear-gradient(90deg, #dc2626, #7f1d1d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Dark brand text */
html.dark #header .site-name,
html.dark #header h1 a {
    background: linear-gradient(90deg, #facc15, #eab308);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════
   PRIMARY BUTTONS
══════════════════════════════════════════════ */

/* Light */
html:not(.dark) .button.default,
html:not(.dark) input[type="submit"].default,
html:not(.dark) .submit-row input[type="submit"],
html:not(.dark) .btn-primary {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3) !important;
    transition: all 0.2s ease;
}

html:not(.dark) .button.default:hover,
html:not(.dark) input[type="submit"].default:hover,
html:not(.dark) .submit-row input[type="submit"]:hover,
html:not(.dark) .btn-primary:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
    transform: translateY(-1px);
}

/* Dark */
html.dark .button.default,
html.dark input[type="submit"].default,
html.dark .submit-row input[type="submit"],
html.dark .btn-primary {
    background: linear-gradient(135deg, #eab308 0%, #a16207 100%) !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(234, 179, 8, 0.3) !important;
    transition: all 0.2s ease;
}

html.dark .button.default:hover,
html.dark input[type="submit"].default:hover,
html.dark .submit-row input[type="submit"]:hover,
html.dark .btn-primary:hover {
    background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%) !important;
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.4) !important;
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════
   SECONDARY / OUTLINE BUTTONS
══════════════════════════════════════════════ */

/* Light */
html:not(.dark) .btn-secondary,
html:not(.dark) .button {
    border-color: #dc2626 !important;
    color: #dc2626 !important;
    transition: all 0.2s ease;
}

html:not(.dark) .btn-secondary:hover,
html:not(.dark) .button:hover {
    background: rgba(220, 38, 38, 0.06) !important;
    color: #991b1b !important;
}

/* Dark */
html.dark .btn-secondary,
html.dark .button {
    border-color: #facc15 !important;
    color: #facc15 !important;
    transition: all 0.2s ease;
}

html.dark .btn-secondary:hover,
html.dark .button:hover {
    background: rgba(250, 204, 21, 0.08) !important;
    color: #fde047 !important;
}

/* ══════════════════════════════════════════════
   LINKS
══════════════════════════════════════════════ */

html:not(.dark) a {
    color: #dc2626;
    transition: color 0.15s ease;
}

html:not(.dark) a:hover {
    color: #991b1b;
}

html.dark a {
    color: #facc15;
    transition: color 0.15s ease;
}

html.dark a:hover {
    color: #fde047;
}

/* ══════════════════════════════════════════════
   BADGES & TAGS
══════════════════════════════════════════════ */

html:not(.dark) .badge {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

html.dark .badge {
    background: #2d2510 !important;
    color: #facc15 !important;
    border: 1px solid #854d0e !important;
}

/* ══════════════════════════════════════════════
   FORM INPUTS — BORDERS (idle + focus)
══════════════════════════════════════════════ */

/* Light: visible gray border at rest, red on focus */
html:not(.dark) input[type="text"],
html:not(.dark) input[type="email"],
html:not(.dark) input[type="password"],
html:not(.dark) input[type="number"],
html:not(.dark) input[type="url"],
html:not(.dark) input[type="date"],
html:not(.dark) input[type="datetime-local"],
html:not(.dark) input[type="search"],
html:not(.dark) input[type="tel"],
html:not(.dark) select,
html:not(.dark) textarea {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #111827 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
    outline: none !important;
}

/* Dark: subtle warm border at rest, yellow on focus */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="url"],
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark input[type="search"],
html.dark input[type="tel"],
html.dark select,
html.dark textarea {
    border: 1px solid #3d3828 !important;
    border-radius: 6px !important;
    background: #1e1b14 !important;
    color: #f0ebe0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #facc15 !important;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.1) !important;
    outline: none !important;
}

/* ══════════════════════════════════════════════
   DELETE BUTTON FIX
   Light: white text on red bg so it's readable
   Dark:  dark text on yellow bg
══════════════════════════════════════════════ */

/* Light — delete button: solid red bg, white text */
html:not(.dark) .submit-row a.deletelink,
html:not(.dark) a.deletelink,
html:not(.dark) .deletelink {
    background: #dc2626 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

html:not(.dark) .submit-row a.deletelink:hover,
html:not(.dark) a.deletelink:hover,
html:not(.dark) .deletelink:hover {
    background: #991b1b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Dark — delete button: yellow bg, dark text */
html.dark .submit-row a.deletelink,
html.dark a.deletelink,
html.dark .deletelink {
    background: #eab308 !important;
    color: #1c1610 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

html.dark .submit-row a.deletelink:hover,
html.dark a.deletelink:hover,
html.dark .deletelink:hover {
    background: #facc15 !important;
    color: #1c1610 !important;
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════ */

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

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

html:not(.dark) ::-webkit-scrollbar-thumb {
    background: #fca5a5;
    border-radius: 3px;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: #ef4444;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #a16207;
    border-radius: 3px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #facc15;
}