/*
 * Modern skin for the whole site. Loaded by views/layouts/main.php when the user's look is "modern"
 * (cookie "ui", set by the switch on the dashboard; default: params['uiDefault']).
 * Everything is scoped to html.ui-modern, so the original look is untouched when it is off.
 */
html.ui-modern {
  --hm-bg: #f4f5f7;
  --hm-surface: #ffffff;
  --hm-ink: #111827;
  --hm-text: #374151;
  --hm-muted: #6b7280;
  --hm-line: #e7e9ee;
  --hm-brand: #f9a21c;        /* the orange already in the logo */
  --hm-brand-hover: #fbb040;
  --hm-brand-deep: #b45309;
  --hm-link: #1d4ed8;
  --hm-sidebar: #111827;
  --hm-radius: 12px;
  --hm-ease: cubic-bezier(0.23, 1, 0.32, 1);
}
html.ui-modern body {
  background: var(--hm-bg);
  color: var(--hm-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}
html.ui-modern .content-wrap, html.ui-modern .content { background: var(--hm-bg); }

/* ---- Sidebar ---- */
html.ui-modern .sidebar { background: var(--hm-sidebar); }
html.ui-modern .sidebar .sidebar-nav > li > a { color: #9ca3af; transition: background-color 140ms ease, color 140ms ease; }
html.ui-modern .sidebar .sidebar-nav > li.active > a { color: #fff; background: rgba(249, 162, 28, 0.12); box-shadow: inset 3px 0 0 var(--hm-brand); }
@media (hover: hover) and (pointer: fine) {
  html.ui-modern .sidebar .sidebar-nav > li > a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
}

/* ---- Title ---- */
html.ui-modern .page-title { color: var(--hm-ink); font-weight: 650; letter-spacing: -0.02em; }
html.ui-modern .page-title small { color: var(--hm-muted); font-weight: 400; letter-spacing: 0; }

/* ---- Cards ---- */
html.ui-modern .widget { background: var(--hm-surface); border: 1px solid var(--hm-line); border-radius: var(--hm-radius); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
html.ui-modern .widget > header h4 { color: var(--hm-ink); font-weight: 400; }
html.ui-modern .widget > header h4 .fw-semi-bold { font-weight: 650; }

/* KPI tiles: white card with a tinted icon chip instead of a full colour block */
html.ui-modern .widget.bg-info.text-white, html.ui-modern .widget.bg-primary.text-white { background: var(--hm-surface); color: var(--hm-ink); }
html.ui-modern .widget.text-white h5 { color: var(--hm-muted) !important; font-weight: 500; font-size: 13px; margin-bottom: 4px; }
html.ui-modern .widget.text-white .h2 { color: var(--hm-ink) !important; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
html.ui-modern .widget.text-white .widget-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; font-size: 24px; opacity: 1; }
html.ui-modern .widget.bg-info.text-white .widget-icon { background: #ccfbf1; color: #0f766e; }
html.ui-modern .widget.bg-primary.text-white .widget-icon { background: #dbeafe; color: #1d4ed8; }
html.ui-modern .widget.text-white .widget-icon i { color: inherit; }

/* KPI tile layout: icon chip beside label and number */
html.ui-modern .widget.text-white .widget-body .row { display: flex; align-items: center; gap: 16px; margin: 0; }
html.ui-modern .widget.text-white .widget-body .row::before, html.ui-modern .widget.text-white .widget-body .row::after { display: none; }
html.ui-modern .widget.text-white .widget-body .row > [class*="col-"] { float: none; width: auto; padding: 0; }

/* ---- Buttons ---- */
html.ui-modern .btn { border: 0; border-radius: 10px; font-weight: 600; transition: transform 140ms var(--hm-ease), background-color 140ms ease, color 140ms ease; }
html.ui-modern .btn:active { transform: scale(0.97); }
html.ui-modern .btn:focus-visible { outline: 3px solid rgba(249, 162, 28, 0.45); outline-offset: 2px; }
/* the two main actions share the brand orange */
html.ui-modern .btn-block.btn-info, html.ui-modern .btn-block.btn-primary { background: var(--hm-brand); color: #1f1300; padding: 12px 16px; font-size: 14px; box-shadow: 0 1px 2px rgba(180, 83, 9, 0.25); }
html.ui-modern .btn-block.btn-info i, html.ui-modern .btn-block.btn-primary i { margin-right: 6px; }
@media (hover: hover) and (pointer: fine) {
  html.ui-modern .btn-block.btn-info:hover, html.ui-modern .btn-block.btn-primary:hover { background: var(--hm-brand-hover); transform: translateY(-1px); }
}
html.ui-modern .btn-block.btn-info:active, html.ui-modern .btn-block.btn-primary:active { transform: scale(0.98); }

/* ---- Tables ---- */
html.ui-modern .table > thead > tr > th { color: var(--hm-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; border-bottom: 1px solid var(--hm-line); }
html.ui-modern .table > tbody > tr > td { border-top: 1px solid var(--hm-line); vertical-align: middle; color: var(--hm-text); }
html.ui-modern .table > tbody > tr > td.text-semi-muted { color: var(--hm-muted); }
html.ui-modern .table > tbody > tr { transition: background-color 120ms ease; }
@media (hover: hover) and (pointer: fine) {
  html.ui-modern .table > tbody > tr:hover { background: #f9fafb; }
}
/* ID chips */
html.ui-modern .table td:first-child .btn { background: #f3f4f6; color: var(--hm-ink); border-radius: 999px; padding: 3px 11px; font-size: 12px; font-variant-numeric: tabular-nums; box-shadow: none; }
html.ui-modern .table td:first-child .btn.btn-primary { background: #fff1d6; color: var(--hm-brand-deep); }
/* Row actions: quiet icon buttons, colour on the icon, tint on hover */
html.ui-modern .table td.col-md-2:last-child { width: 1%; white-space: nowrap; text-align: right; }
html.ui-modern .table td:not(:first-child) .btn { width: 30px; height: 30px; margin: 0 1px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; box-shadow: none; border-radius: 8px; }
html.ui-modern .table td .btn-info    { color: #0369a1; }
html.ui-modern .table td .btn-danger  { color: #b91c1c; }
html.ui-modern .table td .btn-warning { color: #b45309; }
html.ui-modern .table td .btn-success { color: #15803d; }
html.ui-modern .table td .btn-primary { color: #4338ca; }
@media (hover: hover) and (pointer: fine) {
  html.ui-modern .table td .btn-info:hover    { background: #e0f2fe; }
  html.ui-modern .table td .btn-danger:hover  { background: #fee2e2; }
  html.ui-modern .table td .btn-warning:hover { background: #fef3c7; }
  html.ui-modern .table td .btn-success:hover { background: #dcfce7; }
  html.ui-modern .table td:not(:first-child) .btn-primary:hover { background: #e0e7ff; }
}
@media (max-width: 767px) {
  html.ui-modern .table td.col-md-2:last-child { white-space: normal; width: auto; }
}
/* Export state: spinner means pending, tick means ready */
html.ui-modern .table .fa-spinner { color: var(--hm-brand-deep); animation: hm-spin 1.2s linear infinite; }
html.ui-modern .table .fa-check { color: #16a34a; }
@keyframes hm-spin { to { transform: rotate(360deg); } }

/* ---- Inputs ---- */
html.ui-modern .form-control { border: 1px solid #d5d9e0; border-radius: 10px; box-shadow: none; transition: border-color 140ms ease, box-shadow 140ms ease; }
html.ui-modern .form-control:focus { border-color: var(--hm-brand); box-shadow: 0 0 0 3px rgba(249, 162, 28, 0.22); }

/* ---- Links ---- */
html.ui-modern .widget-body a { overflow-wrap: anywhere; }
html.ui-modern .widget-body a:not(.btn) { color: var(--hm-link); font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 220ms var(--hm-ease), color 140ms ease; }
html.ui-modern .widget-body a[target="_blank"]:not(.btn)::after { content: "\2197"; display: inline-block; margin-left: 4px; font-size: 0.9em; opacity: 0.6; }
@media (hover: hover) and (pointer: fine) {
  html.ui-modern .widget-body a:not(.btn):hover { background-size: 100% 1.5px; }
  html.ui-modern .col-md-3 > .widget { transition: transform 180ms var(--hm-ease), border-color 180ms ease; }
  html.ui-modern .col-md-3 > .widget:hover { transform: translateY(-2px); border-color: #d5d9e0; }
}

/* ---- Entrance: a short rise, once per browser session ---- */
html.ui-modern.hm-enter .home-modern .widget { animation: hm-rise 260ms var(--hm-ease) backwards; }
html.ui-modern.hm-enter .home-modern .row > [class*="col-"]:nth-child(2) > .widget { animation-delay: 50ms; }
html.ui-modern.hm-enter .home-modern .col-md-3:nth-child(1) > .widget { animation-delay: 120ms; }
html.ui-modern.hm-enter .home-modern .col-md-3:nth-child(2) > .widget { animation-delay: 170ms; }
html.ui-modern.hm-enter .home-modern .col-md-3:nth-child(3) > .widget { animation-delay: 220ms; }
html.ui-modern.hm-enter .home-modern .col-md-3:nth-child(4) > .widget { animation-delay: 270ms; }
@keyframes hm-rise { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  html.ui-modern.hm-enter .home-modern .widget { animation: hm-fade 150ms ease backwards; animation-delay: 0ms !important; }
  @keyframes hm-fade { from { opacity: 0; } }
  html.ui-modern .btn:active, html.ui-modern .btn-block:hover, html.ui-modern .col-md-3 > .widget:hover { transform: none; }
  html.ui-modern .table .fa-spinner { animation: none; }
}

/* ======================================================================
   Forms and wizard (Pre-Call / Presentation builder pages)
   ====================================================================== */
/* Step tabs */
html.ui-modern .form-wizard .nav-justified > li > a { display: block; background: var(--hm-surface); color: var(--hm-muted); border: 1px solid var(--hm-line); border-radius: 10px; padding: 11px 12px; font-weight: 600; text-align: center; text-decoration: none; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
html.ui-modern .form-wizard .nav-justified > li > a small { color: inherit; opacity: 0.7; margin-right: 2px; }
html.ui-modern .form-wizard .nav-justified > li.active > a, html.ui-modern .form-wizard .nav-pills > li.active > a { background: var(--hm-ink) !important; color: #fff; border-color: var(--hm-ink); }
/* Steps the user has already reached stay neutral but clickable (the plugin marks every step 'done' when editing an existing document). */
html.ui-modern .form-wizard .nav-pills > li.done:not(.active) > a { background: var(--hm-surface) !important; color: var(--hm-muted); cursor: pointer; }
html.ui-modern .form-wizard .nav-justified > li > a small { color: inherit; opacity: 0.7; margin-right: 2px; }
html.ui-modern .form-wizard .nav-justified > li.active > a small { opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  html.ui-modern .form-wizard .nav-justified > li:not(.active) > a:hover { border-color: #cfd4dc; color: var(--hm-ink); }
}
html.ui-modern .form-wizard .nav-justified > li { padding: 0 4px; }
/* Progress: thin orange line */
html.ui-modern .progress { height: 4px; border-radius: 999px; background: #e5e7eb; box-shadow: none; overflow: hidden; }
html.ui-modern .progress-bar { background: var(--hm-brand); transition: width 360ms var(--hm-ease); }
html.ui-modern .tab-pane.bg-gray-lighter { background: #f8f9fb; border-radius: var(--hm-radius); }

/* Buttons on form pages: ink for actions, orange for moving forward, outline for secondary */
html.ui-modern .btn-info:not(.btn-block), html.ui-modern .btn-success:not(.btn-block):not(table .btn) { background: var(--hm-ink); color: #fff; padding: 8px 14px; }
html.ui-modern .btn-block.btn-success { background: var(--hm-brand); color: #1f1300; padding: 12px 16px; font-size: 14px; box-shadow: 0 1px 2px rgba(180, 83, 9, 0.25); }
html.ui-modern .pager.wizard .btn-primary, html.ui-modern .pager.wizard .btn-success { background: var(--hm-brand); color: #1f1300; padding: 9px 20px; box-shadow: 0 1px 2px rgba(180, 83, 9, 0.25); }
html.ui-modern .btn-default { background: var(--hm-surface); color: var(--hm-text); border: 1px solid #d5d9e0; }
html.ui-modern .btn-default.btn-rounded, html.ui-modern .pager.wizard .btn { border-radius: 999px; }
@media (hover: hover) and (pointer: fine) {
  html.ui-modern .btn-info:not(.btn-block):hover, html.ui-modern .btn-success:not(.btn-block):hover { background: #1f2937; }
  html.ui-modern .pager.wizard .btn-primary:hover, html.ui-modern .pager.wizard .btn-success:hover, html.ui-modern .btn-block.btn-success:hover { background: var(--hm-brand-hover); transform: translateY(-1px); }
  html.ui-modern .btn-default:hover { background: #f3f4f6; }
}
/* Form labels and groups */
html.ui-modern label { color: var(--hm-text); font-weight: 500; font-size: 13px; }
html.ui-modern .widget h3 { color: var(--hm-ink); font-weight: 650; letter-spacing: -0.01em; }
html.ui-modern .input-group-btn .btn, html.ui-modern .input-group-addon { border-radius: 0 10px 10px 0; }

/* ---- Site-wide consistency (every page) ---- */
/* Plain primary buttons (Search, Save, ...) in ink, like the other form actions */
html.ui-modern .btn-primary:not(.btn-block) { background: var(--hm-ink); color: #fff; padding: 8px 14px; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  html.ui-modern .btn-primary:not(.btn-block):hover { background: #1f2937; }
}
/* Headings inside cards match the page titles */
html.ui-modern .widget-body h1, html.ui-modern .widget > header h1 { color: var(--hm-ink); font-weight: 650; letter-spacing: -0.02em; }
html.ui-modern h2, html.ui-modern h3 { color: var(--hm-ink); }
/* Pagination */
html.ui-modern .pagination > li > a, html.ui-modern .pagination > li > span { border: 1px solid var(--hm-line); border-radius: 8px; margin: 0 2px; color: var(--hm-text); background: var(--hm-surface); }
html.ui-modern .pagination > .active > a, html.ui-modern .pagination > .active > span { background: var(--hm-ink); border-color: var(--hm-ink); color: #fff; }
html.ui-modern .pagination > .disabled > a, html.ui-modern .pagination > .disabled > span { color: #c0c5cd; }
/* Grid header sort links: quieter than body links */
html.ui-modern .table > thead > tr > th > a { color: var(--hm-muted); font-weight: 600; }
/* Dropdown menus and modals */
html.ui-modern .dropdown-menu { border: 1px solid var(--hm-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12); }
html.ui-modern .modal-content { border: 0; border-radius: 14px; }
html.ui-modern .alert { border-radius: 10px; border: 0; }
html.ui-modern .page-title .text-info, html.ui-modern .page-title .text-primary, html.ui-modern .page-title .text-success { color: var(--hm-brand-deep); }

/* ---- Design switch in the top bar ---- */
html.ui-modern .ui-switch-nav > a { color: var(--hm-muted); }
html.ui-modern .ui-switch-nav > a.active { color: var(--hm-ink); box-shadow: inset 0 -2px 0 var(--hm-brand); }
@media (hover: hover) and (pointer: fine) {
  html.ui-modern .ui-switch-nav > a:not(.ui-switch-label):hover { color: var(--hm-ink); }
}

/* ---- Sidebar submenus: a deeper navy than the sidebar, same family ---- */
html.ui-modern .sidebar .sidebar-nav > li > ul { background: #0b1220; padding: 4px 0; box-shadow: inset 3px 0 0 rgba(249, 162, 28, 0.35); }
html.ui-modern .sidebar .sidebar-nav > li > ul > li > a { color: #9ca3af; transition: background-color 140ms ease, color 140ms ease; }
html.ui-modern .sidebar .sidebar-nav > li > ul > li.active > a { color: var(--hm-brand); background: rgba(249, 162, 28, 0.08); }
html.ui-modern .sidebar .sidebar-nav > li > a[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.05); }
@media (hover: hover) and (pointer: fine) {
  html.ui-modern .sidebar .sidebar-nav > li > ul > li > a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
}