/* =====================================================================
   ui-refresh.css  —  CDMy admin UI/UX polish (styles only, additive)
   The app is built on Pure.css (purecss.io) + custom cd-* classes.
   Loaded LAST in _Layout so it layers over the existing theme.
   Color-agnostic enhancements: radius, depth, smooth states, spacing.
   Purely visual — no markup/logic changes. Remove the <link> to revert.
   ===================================================================== */

:root {
    --ui-radius: 8px;
    --ui-radius-sm: 6px;
    --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    --ui-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --ui-border: #e3e6ec;
    --ui-focus: rgba(64, 120, 230, 0.35);
    --ui-ease: 150ms ease;
}

/* ---- Typography: crisper rendering + comfortable rhythm ---- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
}

/* ---- Buttons (Pure + custom cd- buttons): rounded, soft depth, smooth hover ---- */
.pure-button,
.pure-button-primary,
.cd-primary-btn,
.btn-default,
.btn-success {
    border-radius: var(--ui-radius-sm) !important;
    transition: filter var(--ui-ease), box-shadow var(--ui-ease), transform var(--ui-ease);
    cursor: pointer;
}

.pure-button:hover,
.pure-button-primary:hover,
.cd-primary-btn:hover,
.btn-default:hover,
.btn-success:hover {
    filter: brightness(0.96);
    box-shadow: var(--ui-shadow-sm);
}

.pure-button:active,
.pure-button-primary:active,
.cd-primary-btn:active,
.btn-default:active,
.btn-success:active {
    transform: translateY(1px);
    filter: brightness(0.92);
}

.pure-button:focus-visible,
.pure-button-primary:focus-visible,
.cd-primary-btn:focus-visible,
.btn-default:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-focus);
}

.btn-link {
    transition: color var(--ui-ease), opacity var(--ui-ease);
}
.btn-link:hover { opacity: 0.8; }

/* ---- Inputs (Pure forms + custom): softer borders, clear focus ring ---- */
.pure-form input[type="text"],
.pure-form input[type="email"],
.pure-form input[type="password"],
.pure-form input[type="number"],
.pure-form input[type="search"],
.pure-form input[type="url"],
.pure-form input[type="tel"],
.pure-form input[type="date"],
.pure-form select,
.pure-form textarea,
.cd-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    border-radius: var(--ui-radius-sm) !important;
    transition: border-color var(--ui-ease), box-shadow var(--ui-ease);
}

.pure-form input:focus,
.pure-form select:focus,
.pure-form textarea:focus,
.cd-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-focus) !important;
}

/* a touch more breathing room between stacked form fields */
.pure-control-group {
    margin-bottom: 1rem;
}

/* ---- Tables (Pure): airier cells, lighter rules, row hover ---- */
.pure-table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--ui-radius) !important;
    overflow: hidden;
}

.pure-table th {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.pure-table td,
.pure-table th {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    border-color: var(--ui-border) !important;
}

.pure-table tbody tr {
    transition: background-color var(--ui-ease);
}
.pure-table tbody tr:hover {
    background-color: rgba(16, 24, 40, 0.03);
}

/* ---- Alerts: rounded, gentle depth ---- */
.alert {
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-sm);
}

/* ---- Page header: a touch more separation ---- */
.page-header {
    padding-bottom: 0.75rem;
}

/* ---- Content canvas: clearer than the old near-white #f9f9f9 so the white header
   and white cards/panels read as distinct layers (subtle on all monitors). ---- */
#pagebody .main {
    background: #e9ebf0;
}

/* ---- Sidebar nav items: smooth, subtle hover feedback (no layout change) ---- */
#sitenav .navitem,
#sitenav .navitem a,
#sitenav .navitem span {
    transition: opacity var(--ui-ease), background-color var(--ui-ease), color var(--ui-ease);
}
#sitenav .navitem:hover {
    opacity: 0.92;
}

/* ---- Sidebar nav (modern menu): full-width rows, white icons, full-bleed active ---- */
#admin.flexcontainer nav .navlinks .navitem > span {
    display: flex;
    align-items: center;
    padding: 0 22px;
}
#admin.flexcontainer nav .navlinks .navitem > span .cd-navicon {
    color: #fff;
    width: 20px;
    margin-right: 12px;
    text-align: center;
    flex: none;
    font-size: 15px;
}
#admin.flexcontainer nav .navlinks .navitem > span a {
    flex: 1;
    padding-left: 0 !important;
}
/* full-width green active row (was a shrink-to-content pill) */
#admin.flexcontainer nav .navlinks .navitem > .selected {
    border-radius: 0;
}
#admin.flexcontainer nav .navlinks .navitem > .selected a {
    background: transparent !important;
}
/* full-width hover on non-active rows; active rows keep their darker .selected:hover green */
#admin.flexcontainer nav .navlinks .navitem > span:not(.selected):hover {
    background: rgba(255, 255, 255, 0.10);
}
#admin.flexcontainer nav .navlinks .navitem a:hover {
    background: transparent !important;
}

/* ---- Brand cohesion: tables + active green match the purple/green brand ---- */
/* Table panels were a blue→green gradient that fought the purple sidebar — use the brand gradient. */
.pure-table-headed thead,
.pure-table-headed tfoot {
    background-image: linear-gradient(135deg, #612dd9 0%, #1600cc 100%) !important;
}
.pure-table-headed thead th,
.pure-table-headed thead td {
    color: #fff !important;
}
/* Replace the disconnected dark red-tinted title band with a light title bar: white row +
   dark Figtree title above the purple column-header row (white→purple gives the separation). */
.pure-table-headed thead tr:first-child {
    background-image: none !important;
    background-color: #d8dce4 !important;   /* clearly darker than the #e9ebf0 canvas AND the white rows */
    color: #2f3440 !important;
    border-bottom: 1px solid #c4c9d4;
}
.pure-table-headed thead tr:first-child th,
.pure-table-headed thead tr:first-child td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
/* brand green accent on the title (reliably visible; cell-edge border got eaten by the table) */
.pure-table-headed thead h2 {
    font-family: "Figtree", "Open Sans", sans-serif;
    color: #2f3440;
    border-left: 4px solid #1fbf56;
    padding-left: 12px;
}
/* a little more breathing room in the data rows */
.pure-table-headed tbody td {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}
/* Active nav: standard brand green #1fbf56 (was the brighter #55dc73). */
#admin.flexcontainer nav .navlinks .navitem > .selected {
    background-color: #1fbf56;
}
#admin.flexcontainer nav .navlinks .navitem > .selected:hover {
    background-color: #1aa64b;
}
/* Page titles: Figtree for a cleaner, more modern header with more presence. */
.page-header h1,
.page-header h2 {
    font-family: "Figtree", "Open Sans", sans-serif !important;
    font-weight: 600;
    color: #3a3f4b;
    letter-spacing: -0.02em;
}

/* ---- Misc polish ---- */
a { transition: color var(--ui-ease); }

::selection { background: var(--ui-focus); }

html { scroll-behavior: smooth; }


.gradientbg {
    background: linear-gradient(135deg, #612dd9 0%, #1600cc 100%) !important;
}
#demositemsg {color:#fff;}