/* =====================================================
   KEY ARCH ERP - theme (small on purpose)
   Almost all of the design comes from the Tailwind classes
   written inside index.html. This file only holds the
   few things that Tailwind cannot do by itself.
===================================================== */

:root {
    --bg-main: #060c18;
    --bg-card: #0d172d;
    --bg-panel: #0a1224;
    --border: #182848;
    --border-soft: #1e2f52;
    --blue: #3b82f6;
    --text: #f3f4f6;
    --muted: #94a3b8;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bg-main);
    color: var(--text);
    -webkit-text-size-adjust: 100%;
}

/* =====================================================
   SCROLLBARS (dark)
===================================================== */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a1224; }
::-webkit-scrollbar-thumb { background: #1e2f52; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #253d6f; }

/* =====================================================
   FORM CONTROLS
   color-scheme: dark = dark date calendar, dark drop-down lists,
   white calendar icon (no unreadable white-on-white lists on Windows)
===================================================== */

input,
select,
textarea {
    color-scheme: dark;
    color: #ffffff;
}

select option {
    background: #14223d;
    color: #ffffff;
}

input::placeholder,
textarea::placeholder {
    color: #64748b;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

/* =====================================================
   BUTTONS
   Smooth colour changes only (nothing jumps on hover).
   The main action buttons (the ones with a shadow) lift slightly.
===================================================== */

button,
a,
input,
select,
textarea {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease, box-shadow .2s ease;
}

button { cursor: pointer; }

button.shadow-lg:hover,
button.shadow-xl:hover {
    transform: translateY(-1px);
}

button.shadow-lg:active,
button.shadow-xl:active {
    transform: translateY(0);
}

button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* =====================================================
   TABLES
   Nothing global here on purpose: the tables are styled by the
   classes in index.html, so the printed invoice and the report
   keep their white background and black text.
===================================================== */