/* App styles — source of truth (copied to dist/ by build.mjs).
   The app's look comes from DaisyUI themes (corporate=light, forest=dark) with
   `base:true`; this file holds ONLY functional bits and theme-aware styling for
   things DaisyUI doesn't cover (GridJS, the fullscreen loader, readonly inputs).
   Everything here uses theme tokens (oklch(var(--b1)) etc.) so it follows the
   active theme — no hard-coded brand colours. */

/* ---- Alpine ---- */
[x-cloak] { display: none !important; }

/* Keep mobile browsers from auto-rescaling text on wide elements (e.g. GridJS). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Functional show/hide hook used by Utils.show/hide (also a Tailwind utility). */
.hidden { display: none; }

/* Client-scoped menu items toggled by Utils.setClientMenu via `.disabled`. */
.client-menu.disabled { pointer-events: none; opacity: 0.45; }

/* Slightly round buttons/inputs in both themes. corporate ships --rounded-btn
   .125rem (nearly square); 0.5rem is DaisyUI's usual default. `html[data-theme]`
   out-specifies DaisyUI's own `[data-theme=…]` rule so it wins regardless of theme. */
html[data-theme] { --rounded-btn: 0.5rem; }

/* ---- Readonly inputs ---- */
/* DaisyUI doesn't distinguish readonly inputs; give them the theme's base-200
   fill so they read as non-editable in either theme. */
input[readonly] {
    background-color: oklch(var(--b2));
    cursor: not-allowed;
}

/* ---- GridJS (list / log views) — themed to match DaisyUI ---- */
/* GridJS isn't a DaisyUI component, so these map it onto the active theme's
   tokens; they recolour automatically with the theme. */
#grid, #log {
    background: oklch(var(--b1));
    border: 1px solid oklch(var(--bc) / 0.1);
    border-radius: var(--rounded-box, 0.5rem);
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px oklch(var(--bc) / 0.12);
    margin: 1rem;
}
.gridjs-container { width: 100%; color: oklch(var(--bc)); }
.gridjs-wrapper { border: none; box-shadow: none; border-radius: var(--rounded-box, 0.5rem); min-height: 400px; }
.gridjs-table { width: 100%; font-size: 0.8rem; }
/* mermaid qualifies these with the element (th.gridjs-th / td.gridjs-td), so the
   overrides must too or they lose the specificity tie and the light colours win. */
th.gridjs-th, td.gridjs-td { border-color: oklch(var(--bc) / 0.12); padding: 6px 10px !important; }
th.gridjs-th { background-color: oklch(var(--b2)); color: oklch(var(--bc)); font-weight: 600; }
td.gridjs-td { background-color: oklch(var(--b1)); color: oklch(var(--bc)); }
.gridjs-tr:nth-child(even) td.gridjs-td { background-color: oklch(var(--b2) / 0.45); }
.gridjs-tr:hover td.gridjs-td { background-color: oklch(var(--p) / 0.08); cursor: pointer; }
input.gridjs-search-input, input.gridjs-input {
    border: 1px solid oklch(var(--bc) / 0.2);
    border-radius: var(--rounded-btn, 0.5rem);
    padding: 8px 12px;
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
    width: 100%;
    max-width: 16rem;
    box-sizing: border-box;
}
input.gridjs-search-input:focus, input.gridjs-input:focus {
    outline: 2px solid oklch(var(--p) / 0.4);
    outline-offset: 1px;
}
/* The mermaid base theme hard-codes light colours on these bits; remap to theme
   tokens so the grids follow corporate/forest (these are visible in dark mode). */
.gridjs-footer { background-color: oklch(var(--b1)); border-color: oklch(var(--bc) / 0.12); color: oklch(var(--bc)); }
.gridjs-tbody { background-color: oklch(var(--b1)); }
.gridjs-loading-bar { background-color: oklch(var(--b1)); }
.gridjs-pagination, .gridjs-pagination .gridjs-summary { color: oklch(var(--bc) / 0.7); }
.gridjs-pagination .gridjs-pages button {
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
    border-color: oklch(var(--bc) / 0.2);
}
.gridjs-pagination .gridjs-pages button:hover { background-color: oklch(var(--b2)); }
.gridjs-pagination .gridjs-pages button.gridjs-currentPage { background-color: oklch(var(--b2)); font-weight: 600; }
.gridjs-pagination .gridjs-pages button.gridjs-spread { background-color: oklch(var(--b1)); }
.gridjs-pagination .gridjs-pages button:disabled,
.gridjs-pagination .gridjs-pages button[disabled] { background-color: oklch(var(--b1)); color: oklch(var(--bc) / 0.4); }
th.gridjs-th-sort:hover, th.gridjs-th-sort:focus { background-color: oklch(var(--b2)); }
.gridjs-tr-selected td { background-color: oklch(var(--p) / 0.12); }
.gridjs-resizable:hover { background-color: oklch(var(--p) / 0.5); }

/* ---- Fullscreen loader ---- */
/* Toggled by Utils.showLoader/hideLoader via `.active`. Theme-aware. */
.fullscreen-loader {
    position: fixed;
    inset: 0;
    background-color: oklch(var(--b1) / 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease-in-out;
}
.fullscreen-loader.active { visibility: visible; opacity: 1; }

.spinner {
    border: 4px solid oklch(var(--bc) / 0.15);
    border-top: 4px solid oklch(var(--p));
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}