/*
 * Mobile-aligned visual redesign — additive theme layer.
 *
 * Loaded after admin.css / datatables.css (see index.html) so these rules win on equal
 * specificity without needing !important. This file only changes visual chrome (color,
 * radius, borders, shadows, spacing) — it does not add, remove, or rename any class that
 * Razor markup or JS (admin.js/datatable.js) depends on, so no markup/behavior changes
 * were needed alongside it.
 *
 * Source of truth for the direction: chris webchanges.docx and
 * StokwareWeb-Redesign-Old-vs-New.docx (proposal docs, approved before this file was written) —
 * ports the Stokware.Mobile.Maui app's flat / white-card / no-shadow / rounded component
 * language (see Docs/MobileScreensDocs/Button_Rules.md, Title_Bar_Rules.md, TagListStyles.md)
 * onto the existing web tokens defined in admin.css (same --primary-color/--body-color/--text-color).
 */

:root {
    --mt-card-bg: #ffffff;
    --mt-card-border: #c4c4c4;
    --mt-radius-card: 14px;
    --mt-radius-ctl: 10px;
    --mt-radius-pill: 999px;
    --mt-danger: #d9534f;
    --mt-green-tint: #e8f6e9;
    --mt-green-deep: #2c8a33;
}

body.dark {
    --mt-card-bg: #242526;
    --mt-card-border: #3a3b3c;
    --mt-green-tint: #1e3220;
    --mt-green-deep: #7ed988;
}

/* ---------------------------------------------------------------------
   Cards — white bordered rounded surface, no shadow. Color-coded
   reporting cards (card-green/yellow/red/blue) keep their meaning as a
   left accent stripe instead of a full-bleed fill, matching the mobile
   tag/status convention (white card + colour) rather than a solid block.
   --------------------------------------------------------------------- */
.card {
    background-color: var(--mt-card-bg);
    border: 1px solid var(--mt-card-border);
    border-radius: var(--mt-radius-card);
    box-shadow: none;
}

.card-green,
.card-yellow,
.card-red,
.card-blue {
    background-color: var(--mt-card-bg);
    border-left: 5px solid var(--card-green-color);
    padding-top: 1em;
}

.card-yellow { border-left-color: var(--card-yellow-color); }
.card-red { border-left-color: var(--card-red-color); }
.card-blue { border-left-color: var(--card-blue-color); }

.reporting-card:hover {
    transform: none;
    box-shadow: 0 0 0 1px var(--primary-color) inset;
}

.asset-table {
    background-color: var(--mt-card-bg);
    border: 1px solid var(--mt-card-border);
    border-radius: var(--mt-radius-card);
}

/* ---------------------------------------------------------------------
   Buttons — flat, rounded, no shadow. Danger red aligned to the mobile
   destructive-action red (#d9534f) instead of the old hard-coded #c70000.
   --------------------------------------------------------------------- */
.btn,
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-full,
.btn-primary,
.btn-secondary,
.btn-full {
    border-radius: var(--mt-radius-ctl);
    box-shadow: none;
}

.btn-danger,
.btn.btn-danger {
    border-radius: var(--mt-radius-ctl);
    box-shadow: none;
    border-color: var(--mt-danger);
    background-color: var(--mt-danger);
}

.btn-danger:hover,
.btn.btn-danger:hover {
    background-color: var(--mt-danger);
    border-color: var(--mt-danger);
}

/* ---------------------------------------------------------------------
   Sidebar — white surface with a bordered edge instead of a solid grey
   block; active item becomes a rounded green-tinted pill (matching the
   mobile app's selected list-row state) instead of a solid green fill.
   --------------------------------------------------------------------- */
.sidebar {
    background: var(--mt-card-bg);
    border-right: 1px solid var(--mt-card-border);
}

.sidebar li.search-box {
    background-color: var(--body-color);
    border: 1px solid var(--mt-card-border);
    border-radius: var(--mt-radius-ctl);
}

.sidebar li.search-box input {
    background-color: transparent;
}

.sidebar li .nav-content {
    color: var(--text-color);
    border-radius: var(--mt-radius-ctl);
}

.sidebar li .nav-content:hover {
    background-color: var(--mt-green-tint);
    color: var(--mt-green-deep);
}

.sidebar li .nav-content:hover .icon {
    background-color: transparent;
    color: var(--mt-green-deep);
}

.sidebar li .nav-content:hover .text {
    color: var(--mt-green-deep);
}

.sidebar .active .nav-content {
    background-color: var(--mt-green-tint);
    color: var(--mt-green-deep);
    border-left: 3px solid var(--primary-color);
}

.sidebar .active .icon {
    background-color: transparent;
    color: var(--mt-green-deep);
}

.sidebar .active .text {
    color: var(--mt-green-deep);
    font-weight: 600;
}

.sidebar .icon {
    background-color: var(--body-color);
}

.sidebar .menu-bar .mode {
    background-color: var(--body-color);
    border: 1px solid var(--mt-card-border);
    border-radius: var(--mt-radius-ctl);
}

.sun-moon .icon {
    background-color: transparent;
}

/* home/content area follows the same light canvas regardless of sidebar bg change */
.home {
    background-color: var(--body-color);
}

/* ---------------------------------------------------------------------
   Tables / DataTables — sit inside a bordered rounded panel instead of
   directly on the page background; rounded search box and flat, rounded
   pagination controls.
   --------------------------------------------------------------------- */
.dataTables_wrapper {
    background-color: var(--mt-card-bg);
    border: 1px solid var(--mt-card-border);
    border-radius: var(--mt-radius-card);
    padding: 16px 18px 10px 18px;
}

.dataTables_filter input {
    border: 1px solid var(--mt-card-border);
    border-radius: var(--mt-radius-pill);
    padding: 6px 14px;
    background-color: var(--body-color);
    color: var(--text-color);
}

.dataTables_length select {
    border: 1px solid var(--mt-card-border);
    border-radius: 8px;
    background-color: var(--body-color);
    color: var(--text-color);
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 1px solid var(--mt-card-border);
}

table.dataTable td {
    background-color: transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--mt-card-border) 55%, transparent);
}

.dataTables_paginate .paginate_button {
    border: 1px solid var(--mt-card-border) !important;
    border-radius: 7px !important;
    background: var(--mt-card-bg) !important;
    color: var(--text-color) !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------
   Form inputs — a visible bordered container instead of borderless flat
   white, matching the mobile Text_Field_Rules.md convention.
   --------------------------------------------------------------------- */
.form-control,
.form-control2 {
    border: 1px solid var(--mt-card-border);
    border-radius: var(--mt-radius-ctl);
}

/* ---------------------------------------------------------------------
   Modals — rounded card body, matching the mobile popup card style.
   --------------------------------------------------------------------- */
.modal-content,
.modal-confirm,
.modal-upload,
.modalwide-content {
    border-radius: var(--mt-radius-card);
    box-shadow: none;
    border: 1px solid var(--mt-card-border);
}

.modal-header {
    background-color: var(--mt-card-bg);
    color: var(--text-color);
    border-radius: var(--mt-radius-card) var(--mt-radius-card) 0 0;
    border-bottom: 1px solid var(--mt-card-border);
}