/**
 * AMPD DCMS2
 *
 * @copyright AMPD Sp. z o.o. / PTWP-ONLINE Sp. z o.o.
 * @author    Dominik Szmidt
 * @link      https://www.ampd.pl
 * @license   Commercial - usage requires a valid license
 * @see       /doc Documentation directory
 * @see       https://docs.ampd.pl Online documentation and examples
 *
 * Theme skin "classic" — recreates the look & feel of the legacy DCMS v1
 * admin (AdminKIT "intranet" skin): navy accent (#263F5E), Lato typography,
 * denser tables with filled header rows and zebra striping, sharp corners.
 *
 * Activation: html[data-theme="classic"] set by the boot script in
 * views/DCMS/main.tpl from localStorage['dcms_theme_skin'] (user preference
 * "themeSkin" in the Display preferences panel).
 *
 * Scoping strategy:
 * - typography and density apply in both color modes ([data-theme="classic"]),
 * - light mode (:not(.dark)) recreates the original v1 palette,
 * - dark mode (.dark) is an original design — "what if v1 had a dark theme":
 *   navy-cast surfaces (via --color-neutral-*/--color-gray-* remap) with the
 *   signature filled navy table header kept.
 *
 * Color overrides ride on the CSS custom properties emitted by Tailwind v4
 * (--color-indigo-*, --color-blue-*, --color-primary): every compiled utility
 * class references these variables, so remapping them here repaints the whole
 * interface without rebuilding main.min.css. This file is plain CSS and is
 * NOT part of the Tailwind build pipeline.
 */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ── 1. Palette remap — light mode only ─────────────────────────────────────
   Navy scale derived from the v1 primary #263F5E; step luminance follows the
   original indigo/blue scales so existing contrast pairings keep working. */

html[data-theme="classic"]:not(.dark) {
	--color-primary: #263f5e;

	--color-indigo-50: #f2f5f9;
	--color-indigo-100: #e2e9f1;
	--color-indigo-200: #c3d0e0;
	--color-indigo-300: #9db2ca;
	--color-indigo-400: #7291b1;
	--color-indigo-500: #527495;
	--color-indigo-600: #3c5b7c;
	--color-indigo-700: #263f5e;
	--color-indigo-800: #1d3049;
	--color-indigo-900: #142234;
	--color-indigo-950: #0d1622;

	--color-blue-50: #f0f4f8;
	--color-blue-100: #dde7ef;
	--color-blue-200: #bccfdf;
	--color-blue-300: #93b0c9;
	--color-blue-400: #6d92b2;
	--color-blue-500: #4d7499;
	--color-blue-600: #395d80;
	--color-blue-700: #2b4a68;
	--color-blue-800: #20374e;
	--color-blue-900: #172737;
	--color-blue-950: #0e1822;

	/* Picker modal header tokens (raw hex in main.css, remapped to navy) */
	--dcms-picker-header-bg: #e2e9f1;
	--dcms-picker-header-text: #142234;

	/* DateRange calendar accent (raw indigo hex in main.css) */
	--drc-accent: #3c5b7c;
}

/* ── 2. Typography & density — both color modes ──────────────────────────── */

/* 14px root shrinks every rem-based size (~12.5%), matching the denser
   13px feel of v1 without touching individual components. */
html[data-theme="classic"] {
	font-size: 14px;
}

html[data-theme="classic"] body {
	font-family: Lato, 'Segoe UI', Arial, ui-sans-serif, system-ui, sans-serif;
}

/* Sharp corners on tables and their scroll containers (v1 had border-radius: 0).
   :has() degrades gracefully — unsupported browsers keep rounded corners. */
html[data-theme="classic"] table[data-table-id] {
	border-radius: 0;
}
html[data-theme="classic"] div:has(> table[data-table-id]) {
	border-radius: 0;
}
html[data-theme="classic"] .btn {
	border-radius: 3px;
}

/* Tighter cell padding. Vertical paddings from the font-scale feature
   (.dcms-fs-* rules) use !important and intentionally keep winning here. */
html[data-theme="classic"] table[data-table-id] > thead > tr > th {
	padding: 8px 10px;
}
html[data-theme="classic"] table[data-table-id] > tbody > tr > td {
	padding: 6px 10px;
}

/* ── 3. Tables — light mode colors ───────────────────────────────────────────
   Filled navy header row with white text and zebra-striped rows — the core
   visual signature of the v1 admin. Backgrounds are set on <tr>, not <td>,
   so row status colors (.dcms-row-danger etc., painted on td) still win. */

html[data-theme="classic"]:not(.dark) table[data-table-id] > thead,
html[data-theme="classic"]:not(.dark) table[data-table-id] > thead > tr > th {
	background-color: #263f5e;
	color: #ffffff;
	border-bottom-color: #1d3049;
}

html[data-theme="classic"]:not(.dark) table[data-table-id] > thead > tr > th:hover {
	background-color: #34517a;
}

/* Sort/menu triggers inside the header inherit gray utilities — lighten them
   so they stay visible on the navy fill. */
html[data-theme="classic"]:not(.dark) table[data-table-id] > thead th button,
html[data-theme="classic"]:not(.dark) table[data-table-id] > thead th .msr {
	color: rgba(255, 255, 255, 0.75);
}
html[data-theme="classic"]:not(.dark) table[data-table-id] > thead th button:hover,
html[data-theme="classic"]:not(.dark) table[data-table-id] > thead th button:hover .msr {
	color: #ffffff;
}

html[data-theme="classic"]:not(.dark) table[data-table-id] > tbody > tr:nth-child(even) {
	background-color: #f3f5f8;
}
html[data-theme="classic"]:not(.dark) table[data-table-id] > tbody > tr:nth-child(odd) {
	background-color: #ffffff;
}

/* Sticky columns carry their own nth-child backgrounds in main.css — keep
   them in lockstep with the zebra above, or they render as a checkerboard. */
html[data-theme="classic"]:not(.dark) table[data-table-id] > tbody > tr:nth-child(odd) .dcms-sticky-col {
	background-color: #ffffff;
}
html[data-theme="classic"]:not(.dark) table[data-table-id] > tbody > tr:nth-child(even) .dcms-sticky-col {
	background-color: #f3f5f8;
}

/* !important required — the base hover rules in main.css use it. */
html[data-theme="classic"]:not(.dark) table[data-table-id] > tbody > tr:hover,
html[data-theme="classic"]:not(.dark) table[data-table-id] > tbody > tr:hover .dcms-sticky-col {
	background-color: #e7ebf1 !important;
}

/* SVG sort triangles (.dcms-sort-indicator) have their own gray colors in
   main.css — invisible on the navy fill. */
html[data-theme="classic"]:not(.dark) table[data-table-id] > thead .dcms-sort-indicator svg {
	color: rgba(255, 255, 255, 0.45);
}
html[data-theme="classic"]:not(.dark) table[data-table-id] > thead .dcms-sort-indicator[data-sort="asc"] .dcms-sort-asc,
html[data-theme="classic"]:not(.dark) table[data-table-id] > thead .dcms-sort-indicator[data-sort="desc"] .dcms-sort-desc {
	color: #ffffff;
}

/* ── 4. Page background — light mode ─────────────────────────────────────────
   v1 framed white content on a gray page (#e8e8e8); a slightly lighter tone
   keeps embedded iframes from looking boxed-in. */

html[data-theme="classic"]:not(.dark) body {
	background-color: #ececec;
}

/* ── 5. Dark mode — "what if v1 had a dark theme" ────────────────────────────
   An original design (v1 never shipped a used dark variant): navy-cast
   surfaces instead of the standard neutral grays, same navy accent identity
   as light mode, and the signature filled navy table header kept.

   Surfaces ride on --color-neutral-*/--color-gray-* — the dark UI is built
   on these variables, so remapping them to a blue-cast scale retints the
   whole panel (sidebar, topbar, cards, inputs). Table rows, sticky columns
   and hovers use raw hexes in main.css and are overridden with direct
   selectors below. */

html[data-theme="classic"].dark {
	--color-primary: #7291b1;

	/* accents — same navy scales as light mode */
	--color-indigo-50: #f2f5f9;
	--color-indigo-100: #e2e9f1;
	--color-indigo-200: #c3d0e0;
	--color-indigo-300: #9db2ca;
	--color-indigo-400: #7291b1;
	--color-indigo-500: #527495;
	--color-indigo-600: #3c5b7c;
	--color-indigo-700: #263f5e;
	--color-indigo-800: #1d3049;
	--color-indigo-900: #142234;
	--color-indigo-950: #0d1622;

	--color-blue-50: #f0f4f8;
	--color-blue-100: #dde7ef;
	--color-blue-200: #bccfdf;
	--color-blue-300: #93b0c9;
	--color-blue-400: #6d92b2;
	--color-blue-500: #4d7499;
	--color-blue-600: #395d80;
	--color-blue-700: #2b4a68;
	--color-blue-800: #20374e;
	--color-blue-900: #172737;
	--color-blue-950: #0e1822;

	/* navy-cast surface scale replacing the neutral/gray grays */
	--color-neutral-50: #f2f5f8;
	--color-neutral-100: #e3e9ef;
	--color-neutral-200: #cbd5e0;
	--color-neutral-300: #a9b8c8;
	--color-neutral-400: #8194a6;
	--color-neutral-500: #5f7288;
	--color-neutral-600: #45566b;
	--color-neutral-700: #313f52;
	--color-neutral-800: #1a2433;
	--color-neutral-900: #121a26;
	--color-neutral-950: #0b111a;

	--color-gray-50: #f2f5f8;
	--color-gray-100: #e3e9ef;
	--color-gray-200: #cbd5e0;
	--color-gray-300: #a9b8c8;
	--color-gray-400: #8194a6;
	--color-gray-500: #5f7288;
	--color-gray-600: #45566b;
	--color-gray-700: #313f52;
	--color-gray-800: #1a2433;
	--color-gray-900: #121a26;
	--color-gray-950: #0b111a;

	--dcms-picker-header-bg: rgba(114, 145, 177, 0.16);
	--dcms-picker-header-text: #cdd7e1;
	--drc-accent: #6e91b4;
}

html[data-theme="classic"].dark body {
	background-color: #0e1520;
}

/* .dark .text-primary is a raw-hex rule in main.css (#60a5fa) — align it
   with the navy accent while keeping AA contrast on dark surfaces. */
html[data-theme="classic"].dark .text-primary {
	color: #93b0c9;
}

/* ── 6. Tables — dark mode ───────────────────────────────────────────────────
   Same structure as the light rules; base dark table colors are raw hexes
   (#181818/#1e1e1e/#252525/#2f2f2f), not variables. Backgrounds go on <tr>
   so row status colors (.dcms-row-*, painted on td) still win. */

html[data-theme="classic"].dark table[data-table-id] > thead,
html[data-theme="classic"].dark table[data-table-id] > thead > tr > th {
	background-color: #1d3049;
	color: #eef3f8;
	border-bottom-color: #152438;
}

html[data-theme="classic"].dark table[data-table-id] > thead > tr > th:hover {
	background-color: #26405f;
}

html[data-theme="classic"].dark table[data-table-id] > thead th button,
html[data-theme="classic"].dark table[data-table-id] > thead th .msr {
	color: rgba(255, 255, 255, 0.7);
}
html[data-theme="classic"].dark table[data-table-id] > thead th button:hover,
html[data-theme="classic"].dark table[data-table-id] > thead th button:hover .msr {
	color: #ffffff;
}

html[data-theme="classic"].dark table[data-table-id] > thead .dcms-sort-indicator svg {
	color: rgba(255, 255, 255, 0.4);
}
html[data-theme="classic"].dark table[data-table-id] > thead .dcms-sort-indicator[data-sort="asc"] .dcms-sort-asc,
html[data-theme="classic"].dark table[data-table-id] > thead .dcms-sort-indicator[data-sort="desc"] .dcms-sort-desc {
	color: #ffffff;
}

html[data-theme="classic"].dark table[data-table-id] > tbody > tr:nth-child(odd) {
	background-color: #131b28;
}
html[data-theme="classic"].dark table[data-table-id] > tbody > tr:nth-child(even) {
	background-color: #182233;
}
html[data-theme="classic"].dark table[data-table-id] > tbody > tr:nth-child(odd) .dcms-sticky-col {
	background-color: #131b28;
}
html[data-theme="classic"].dark table[data-table-id] > tbody > tr:nth-child(even) .dcms-sticky-col {
	background-color: #182233;
}

html[data-theme="classic"].dark table[data-table-id] > tbody > tr:hover,
html[data-theme="classic"].dark table[data-table-id] > tbody > tr:hover .dcms-sticky-col {
	background-color: #21324a !important;
}

/* Cell borders (horizontal + the vertical .dcms-cell-borders lines take the
   cell's border-color) — keep them visible on the navy-dark rows. */
html[data-theme="classic"].dark table[data-table-id] > tbody > tr > td {
	border-color: #263447;
}