/* ========================================================================== */
/* File: pages/assets/css/tml-paper-theme.css */
/* ========================================================================== */

/* ---------------------------
   Brand tokens (from logo)
   --------------------------- */
:root{
  --cc-brand-blue:   #0094E2;
  --cc-brand-orange: #D87200;
  --cc-brand-teal:   #008489;

  --cc-brand-blue-600:   #007EC1;
  --cc-brand-blue-700:   #00689F;
  --cc-brand-orange-600: #B85A00;
  --cc-brand-orange-700: #9A4C00;
  --cc-brand-teal-600:   #007177;
  --cc-brand-teal-700:   #005B60;

  --cc-brand-blue-rgb:   0, 148, 226;
  --cc-brand-blue-rgba:  0, 148, 226, 0.15;
  --cc-brand-orange-rgb: 216, 114, 0;
  --cc-brand-teal-rgb:   0, 132, 137;

  /* Base neutrals */
  --cc-paper: #ffffff;
  --cc-app-bg: #f6f7f9;

  --cc-text: #1f2937;
  --cc-muted: #6b7280;

  --cc-border: #e6e8ee;
  --cc-border-strong: #d7dbe5;

  --cc-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
  --cc-shadow-lg: 0 10px 22px rgba(16,24,40,.10);

  --cc-radius: 10px;
  --cc-radius-sm: 8px;

  --cc-navbar-h: 60px;
  --cc-brand-logo-h: 34px;

  /* Default theme (orange) mapping */
  --cc-primary:     var(--cc-brand-orange);
  --cc-primary-600: var(--cc-brand-orange-600);
  --cc-primary-700: var(--cc-brand-orange-700);
  --cc-primary-rgb: var(--cc-brand-orange-rgb);

  --cc-accent:     var(--cc-brand-blue);
  --cc-accent-600: var(--cc-brand-blue-600);
  --cc-accent-700: var(--cc-brand-blue-700);
  --cc-accent-rgb: var(--cc-brand-blue-rgb);

  --cc-success:     var(--cc-brand-teal);
  --cc-success-600: var(--cc-brand-teal-600);
  --cc-success-700: var(--cc-brand-teal-700);
  --cc-success-rgb: var(--cc-brand-teal-rgb);

  --cc-secondary: #475569;
  --cc-secondary-600: #3b475c;
  --cc-secondary-700: #2f3a4b;
  --cc-secondary-rgb: 71,85,105;

  --cc-info: #3aafb4;
  --cc-info-600: #2b9ea3;
  --cc-info-700: #228a8f;
  --cc-info-rgb: 58,175,180;

  --cc-danger: #dc3545;
  --cc-danger-600: #c82333;
  --cc-danger-700: #a71d2a;
  --cc-danger-rgb: 220,53,69;

  --cc-warning: var(--cc-primary);
  --cc-warning-600: var(--cc-primary-600);
  --cc-warning-700: var(--cc-primary-700);
  --cc-warning-rgb: var(--cc-primary-rgb);

  --cc-focus: rgba(var(--cc-accent-rgb), 0.22);
}

/* Theme: BLUE (swap mapping system-wide) */
html.cc-tml-paper[data-cc-theme="blue"]{
  --cc-primary:     var(--cc-brand-blue);
  --cc-primary-600: var(--cc-brand-blue-600);
  --cc-primary-700: var(--cc-brand-blue-700);
  --cc-primary-rgb: var(--cc-brand-blue-rgb);

  --cc-accent:     var(--cc-brand-orange);
  --cc-accent-600: var(--cc-brand-orange-600);
  --cc-accent-700: var(--cc-brand-orange-700);
  --cc-accent-rgb: var(--cc-brand-orange-rgb);

  --cc-warning: var(--cc-accent);
  --cc-warning-600: var(--cc-accent-600);
  --cc-warning-700: var(--cc-accent-700);
  --cc-warning-rgb: var(--cc-accent-rgb);

  --cc-focus: rgba(var(--cc-primary-rgb), 0.22);
}

/* Anti-flash baseline */
html:not(.cc-tml-paper) body { background: var(--cc-app-bg); color: var(--cc-text); }
html:not(.cc-tml-paper) .navbar.bg-white { background: var(--cc-paper) !important; }
html:not(.cc-tml-paper) .sidebar { background: var(--cc-paper) !important; }

@media (prefers-reduced-motion: reduce) {
  html.cc-tml-paper * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

html.cc-tml-paper body { background: var(--cc-app-bg); color: var(--cc-text); }
html.cc-tml-paper ::selection { background: rgba(var(--cc-accent-rgb), 0.22); }

/* Links */
html.cc-tml-paper a { color: var(--cc-primary-600); }
html.cc-tml-paper a:hover { color: var(--cc-primary-700); }

/* Navbar */
html.cc-tml-paper .navbar { border-bottom: 1px solid var(--cc-border); }
html.cc-tml-paper .navbar.bg-white { background: var(--cc-paper) !important; }
html.cc-tml-paper .navbar .navbar-search { border-radius: 999px; }

/* Sidebar/navbar hamburger (3 bars): use system orange */
html.cc-tml-paper .sidebar-toggle i,
html.cc-tml-paper .sidebar-toggle svg{
  color: var(--cc-brand-orange) !important;
  stroke: var(--cc-brand-orange) !important;
}
html.cc-tml-paper .sidebar-toggle svg *{
  stroke: var(--cc-brand-orange) !important;
}

/* Wallet balance in navbar (use rgba + orange text, fixes "bad" color) */
html.cc-tml-paper .etp-balance-chip{
  background: rgba(var(--cc-brand-blue-rgb), 0.10) !important;
  color: var(--cc-brand-orange) !important;
  border: 1px solid rgba(var(--cc-brand-blue-rgb), 0.18) !important;
}
html.cc-tml-paper .etp-balance-chip i,
html.cc-tml-paper .etp-balance-chip svg{
  color: var(--cc-brand-orange) !important;
  stroke: var(--cc-brand-orange) !important;
}
html.cc-tml-paper #nav_balance_amount{
  color: var(--cc-brand-orange) !important;
}

/* Notification indicator */
html.cc-tml-paper .nav-item .indicator{
  position:absolute;
  right:-2px;
  top:-2px;
  display:none;
  min-width:16px;
  height:16px;
  line-height:16px;
  border-radius:8px;
  font-size:10px;
  text-align:center;
  color:#fff;
  background: var(--cc-danger-600);
  padding: 0 4px;
  box-shadow: 0 .1rem .2rem rgba(0,0,0,.05);
  border: 2px solid var(--cc-paper);
  transition: top .1s ease-out;
}
html.cc-tml-paper .nav-item .indicator.cc-indicator--visible{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
html.cc-tml-paper .nav-item .nav-icon:hover .indicator.cc-indicator--visible{ top:-3px; }

/* Sidebar */
html.cc-tml-paper .sidebar{ background: var(--cc-paper) !important; border-right: 1px solid var(--cc-border); }
html.cc-tml-paper .sidebar-content{ background: transparent !important; }

/* ==========================================================================
   Scrollbars (system-wide)
   - Page (right-side) scrollbar matches sidebar theme
   - DataTables internal scroll areas match theme
   - SimpleBar (sidebar) thumb color + fallback native scrollbars
   ========================================================================== */

/* Page scrollbar (Firefox) */
html.cc-tml-paper{
  scrollbar-gutter: stable;
  scrollbar-color: rgba(var(--cc-brand-orange-rgb), 0.75) transparent;
  scrollbar-width: thin;
}
html.cc-tml-paper body{
  scrollbar-color: rgba(var(--cc-brand-orange-rgb), 0.75) transparent;
  scrollbar-width: thin;
}

/* Sidebar scrollbar hardening (moved from sidebar.php; system-wide) */
html.cc-tml-paper .sidebar .sidebar-content,
html.cc-tml-paper .sidebar .sidebar-content.js-simplebar,
html.cc-tml-paper .sidebar .sidebar-content.js-simplebar .simplebar-content-wrapper{
  max-height: 100vh;
}
html.cc-tml-paper .sidebar .sidebar-content.js-simplebar .simplebar-content-wrapper{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* SimpleBar thumb (system-wide, used by sidebar) */
html.cc-tml-paper .simplebar-scrollbar:before{
  background: rgba(var(--cc-brand-orange-rgb), 0.75) !important;
  border-radius: 999px !important;
}
html.cc-tml-paper .simplebar-scrollbar.simplebar-visible:before{
  opacity: 1 !important;
}
html.cc-tml-paper .simplebar-track.simplebar-vertical{
  width: 10px !important;
}

/* DataTables internal scroll wrapper */
html.cc-tml-paper .etp-dt-scroll{
  scrollbar-color: rgba(var(--cc-brand-orange-rgb), 0.75) transparent;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

/* WebKit scrollbars (page + common scroll containers) */
html.cc-tml-paper::-webkit-scrollbar,
html.cc-tml-paper body::-webkit-scrollbar,
html.cc-tml-paper .etp-dt-scroll::-webkit-scrollbar,
html.cc-tml-paper .modal-dialog-scrollable .modal-body::-webkit-scrollbar,
html.cc-tml-paper .sidebar .sidebar-content.js-simplebar .simplebar-content-wrapper::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
html.cc-tml-paper::-webkit-scrollbar-track,
html.cc-tml-paper body::-webkit-scrollbar-track,
html.cc-tml-paper .etp-dt-scroll::-webkit-scrollbar-track,
html.cc-tml-paper .modal-dialog-scrollable .modal-body::-webkit-scrollbar-track,
html.cc-tml-paper .sidebar .sidebar-content.js-simplebar .simplebar-content-wrapper::-webkit-scrollbar-track{
  background: transparent;
}
html.cc-tml-paper::-webkit-scrollbar-thumb,
html.cc-tml-paper body::-webkit-scrollbar-thumb,
html.cc-tml-paper .etp-dt-scroll::-webkit-scrollbar-thumb,
html.cc-tml-paper .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb,
html.cc-tml-paper .sidebar .sidebar-content.js-simplebar .simplebar-content-wrapper::-webkit-scrollbar-thumb{
  background: rgba(var(--cc-brand-orange-rgb), 0.70);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.65);
}
html.cc-tml-paper::-webkit-scrollbar-thumb:hover,
html.cc-tml-paper body::-webkit-scrollbar-thumb:hover,
html.cc-tml-paper .etp-dt-scroll::-webkit-scrollbar-thumb:hover,
html.cc-tml-paper .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover,
html.cc-tml-paper .sidebar .sidebar-content.js-simplebar .simplebar-content-wrapper::-webkit-scrollbar-thumb:hover{
  background: rgba(var(--cc-brand-orange-rgb), 0.85);
}

html.cc-tml-paper .sidebar-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px 18px;
  border-bottom: 1px solid var(--cc-border);
}
html.cc-tml-paper .sidebar-brand .cc-brand-logo{
  height: var(--cc-brand-logo-h);
  width: auto;
  max-width: 100%;
  display: block;
}
html.cc-tml-paper .sidebar-brand i[data-feather]{ display:none; }

html.cc-tml-paper .sidebar-header{
  color: var(--cc-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
}

/* Sidebar links */
html.cc-tml-paper .sidebar-link{
  border-radius: var(--cc-radius-sm);
  margin: 2px 10px;
  padding: 10px 12px;
  color: #374151 !important;
  transition: background 160ms ease, color 160ms ease;
}
html.cc-tml-paper .sidebar-link:hover{
  background: rgba(var(--cc-primary-rgb), 0.08);
  color: var(--cc-text) !important;
}

/* REQUIRED: active = logo blue bg, orange text (rgba, no gradient) */
html.cc-tml-paper .sidebar-item.active > .sidebar-link,
html.cc-tml-paper .sidebar-dropdown .sidebar-item.active > .sidebar-link{
  background: rgba(var(--cc-brand-blue-rgba)) !important;
  color: var(--cc-brand-orange) !important;
  position: relative;
}
html.cc-tml-paper .sidebar-item.active > .sidebar-link::before,
html.cc-tml-paper .sidebar-dropdown .sidebar-item.active > .sidebar-link::before{
  content:"";
  position:absolute;
  left:-10px;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius: 99px;
  background: var(--cc-brand-orange);
}
html.cc-tml-paper .sidebar-item.active > .sidebar-link i,
html.cc-tml-paper .sidebar-item.active > .sidebar-link svg{
  color: var(--cc-brand-orange) !important;
  stroke: var(--cc-brand-orange) !important;
}

/* Breadcrumbs: remove background color system-wide */
html.cc-tml-paper .breadcrumb{
  background: transparent !important;
  background-color: transparent !important;
}

/* Custom Search (collapse panel): subtle light orange background system-wide */
html.cc-tml-paper #customSearch{
  background: rgba(var(--cc-brand-orange-rgb), 0.07) !important;
  background-color: rgba(var(--cc-brand-orange-rgb), 0.07) !important;
}

/* DataTables: ensure spacing between top pagination row and custom search button system-wide */
html.cc-tml-paper .dataTables_wrapper .custom-search{
  padding-bottom: .75rem;
}

/* ==========================================================================
   DataTables: "Show X entries" control (system-wide)
   - Native <select> matches Search button, with sufficient height so value + icon are visible
   - If enhancer upgrades it to a Bootstrap dropdown, dropdown hover matches theme
   ========================================================================== */

html.cc-tml-paper .dataTables_wrapper .dataTables_length label{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  color: var(--cc-muted);
  font-weight: 600;
}

/* Native select styling (fallback when enhancer dropdown is not used) */
html.cc-tml-paper .dataTables_wrapper .dataTables_length select,
html.cc-tml-paper .dataTables_wrapper .dataTables_length .custom-select,
html.cc-tml-paper .dataTables_wrapper .dataTables_length .form-control{
  border-radius: 10px !important;
  border: 1px solid rgba(var(--cc-primary-rgb), .55) !important;
  background-color: rgba(var(--cc-primary-rgb), .06) !important;
  color: var(--cc-primary-700) !important;

  height: 40px !important;
  min-height: 40px !important;
  line-height: 1.25 !important;

  padding: .5rem 2.25rem .5rem .9rem !important;
  font-weight: 700 !important;

  cursor: pointer !important;
  background-clip: padding-box !important;

  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  background-image:
    linear-gradient(45deg, transparent 50%, var(--cc-primary-700) 50%),
    linear-gradient(135deg, var(--cc-primary-700) 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) 50%,
    calc(100% - .80rem) 50%;
  background-size:
    7px 7px,
    7px 7px;
  background-repeat: no-repeat;

  box-shadow: none !important;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

html.cc-tml-paper .dataTables_wrapper .dataTables_length select:hover,
html.cc-tml-paper .dataTables_wrapper .dataTables_length .custom-select:hover,
html.cc-tml-paper .dataTables_wrapper .dataTables_length .form-control:hover{
  background-color: rgba(var(--cc-primary-rgb), .10) !important;
  border-color: rgba(var(--cc-primary-rgb), .75) !important;
}

html.cc-tml-paper .dataTables_wrapper .dataTables_length select:focus,
html.cc-tml-paper .dataTables_wrapper .dataTables_length .custom-select:focus,
html.cc-tml-paper .dataTables_wrapper .dataTables_length .form-control:focus{
  border-color: rgba(var(--cc-primary-rgb), .75) !important;
  box-shadow: 0 0 0 .2rem var(--cc-focus) !important;
  background-color: rgba(var(--cc-primary-rgb), .10) !important;
  outline: none !important;
}

html.cc-tml-paper .dataTables_wrapper .dataTables_length select:disabled,
html.cc-tml-paper .dataTables_wrapper .dataTables_length .custom-select:disabled,
html.cc-tml-paper .dataTables_wrapper .dataTables_length .form-control:disabled{
  opacity: .65 !important;
  cursor: not-allowed !important;
}

html.cc-tml-paper .dataTables_wrapper .dataTables_length label.etp-length-label{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}

html.cc-tml-paper .dataTables_wrapper .dataTables_length .etp-length-btn{
  height: 40px;
  min-height: 40px;
  line-height: 1.15;
  padding: .5rem 1.05rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.cc-tml-paper .dataTables_wrapper .dataTables_length .etp-length-btn.dropdown-toggle::after{
  margin-left: .55rem;
  vertical-align: middle;
}

html.cc-tml-paper .dataTables_wrapper .dataTables_length .etp-length-menu .dropdown-item{
  font-weight: 700;
  color: var(--cc-text);
}

html.cc-tml-paper .dataTables_wrapper .dataTables_length .etp-length-menu .dropdown-item:hover,
html.cc-tml-paper .dataTables_wrapper .dataTables_length .etp-length-menu .dropdown-item:focus{
  background: rgba(var(--cc-primary-rgb), 0.10);
  color: var(--cc-text);
}

html.cc-tml-paper .dataTables_wrapper .dataTables_length .etp-length-menu .dropdown-item.active,
html.cc-tml-paper .dataTables_wrapper .dataTables_length .etp-length-menu .dropdown-item.active:hover,
html.cc-tml-paper .dataTables_wrapper .dataTables_length .etp-length-menu .dropdown-item.active:focus{
  background: rgba(var(--cc-primary-rgb), 0.14);
  color: var(--cc-primary-700);
  font-weight: 900;
}

/* Main content */
html.cc-tml-paper .content{ padding-top: 18px; }

/* Cards */
html.cc-tml-paper .card{
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  background: var(--cc-paper);
}

/* Card header: match sidebar active (blue tint + orange text) */
html.cc-tml-paper .card-header{
  background: rgba(var(--cc-brand-blue-rgba));
  border-bottom: 1px solid rgba(var(--cc-brand-blue-rgb), 0.18);
  padding: 14px 16px;
  position: relative;
}
html.cc-tml-paper .card-header::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-top-left-radius: var(--cc-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--cc-brand-orange);
}
html.cc-tml-paper .card-header .card-title{
  color: var(--cc-brand-orange) !important;
  font-weight: 800;
}
html.cc-tml-paper .card-header a{
  color: var(--cc-brand-orange) !important;
}
html.cc-tml-paper .card-header a:hover{
  color: var(--cc-brand-orange) !important;
  text-decoration: underline;
}
html.cc-tml-paper .card-header .btn-outline-primary{
  color: var(--cc-brand-orange) !important;
  border-color: rgba(var(--cc-brand-orange-rgb), .55) !important;
  background: rgba(var(--cc-brand-orange-rgb), .06) !important;
}
html.cc-tml-paper .card-header .btn-outline-primary:hover,
html.cc-tml-paper .card-header .btn-outline-primary:focus{
  background: rgba(var(--cc-brand-orange-rgb), .12) !important;
  border-color: rgba(var(--cc-brand-orange-rgb), .75) !important;
  color: var(--cc-brand-orange) !important;
}

html.cc-tml-paper .card-body{ padding: 16px; }
html.cc-tml-paper .card-title{ color: var(--cc-text); }
html.cc-tml-paper .card-subtitle,
html.cc-tml-paper .text-muted{ color: var(--cc-muted) !important; }

/* Tables (solid accents, no gradients) */
html.cc-tml-paper .table thead th{
  color: var(--cc-primary-700);
  border-bottom: 2px solid rgba(var(--cc-primary-rgb), 0.18);
}

html.cc-tml-paper table.dataTable tfoot th{
  color: var(--cc-primary-700);
  border-top: 2px solid rgba(var(--cc-primary-rgb), 0.18);
}

html.cc-tml-paper .table-hover tbody tr:hover{
  background: rgba(var(--cc-primary-rgb), 0.04);
}

/* Buttons */
html.cc-tml-paper .btn{
  border-radius: 10px;
  padding: .5rem .9rem;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}
html.cc-tml-paper .btn:focus,
html.cc-tml-paper .btn.focus{ box-shadow: 0 0 0 .2rem var(--cc-focus) !important; }
html.cc-tml-paper .btn-pill{ border-radius: 999px !important; }
html.cc-tml-paper .btn-square{ border-radius: 6px !important; }

html.cc-tml-paper .btn-primary{
  background-color: var(--cc-primary-600) !important;
  border-color: var(--cc-primary-600) !important;
  color: #fff !important;
}
html.cc-tml-paper .btn-primary:hover,
html.cc-tml-paper .btn-primary:focus{
  background-color: var(--cc-primary-700) !important;
  border-color: var(--cc-primary-700) !important;
}

html.cc-tml-paper .btn-secondary{
  background-color: var(--cc-secondary-600) !important;
  border-color: var(--cc-secondary-600) !important;
  color: #fff !important;
}
html.cc-tml-paper .btn-secondary:hover,
html.cc-tml-paper .btn-secondary:focus{
  background-color: var(--cc-secondary-700) !important;
  border-color: var(--cc-secondary-700) !important;
}

html.cc-tml-paper .btn-success{
  background-color: var(--cc-success-600) !important;
  border-color: var(--cc-success-600) !important;
  color: #fff !important;
}
html.cc-tml-paper .btn-success:hover,
html.cc-tml-paper .btn-success:focus{
  background-color: var(--cc-success-700) !important;
  border-color: var(--cc-success-700) !important;
}

html.cc-tml-paper .btn-info{
  background-color: var(--cc-info-600) !important;
  border-color: var(--cc-info-600) !important;
  color: #fff !important;
}
html.cc-tml-paper .btn-info:hover,
html.cc-tml-paper .btn-info:focus{
  background-color: var(--cc-info-700) !important;
  border-color: var(--cc-info-700) !important;
}

html.cc-tml-paper .btn-warning{
  background-color: var(--cc-warning-600) !important;
  border-color: var(--cc-warning-600) !important;
  color: #fff !important;
}
html.cc-tml-paper .btn-warning:hover,
html.cc-tml-paper .btn-warning:focus{
  background-color: var(--cc-warning-700) !important;
  border-color: var(--cc-warning-700) !important;
}

html.cc-tml-paper .btn-danger{
  background-color: var(--cc-danger-600) !important;
  border-color: var(--cc-danger-600) !important;
  color: #fff !important;
}
html.cc-tml-paper .btn-danger:hover,
html.cc-tml-paper .btn-danger:focus{
  background-color: var(--cc-danger-700) !important;
  border-color: var(--cc-danger-700) !important;
}

html.cc-tml-paper .btn-outline-primary{
  color: var(--cc-primary-700) !important;
  border-color: rgba(var(--cc-primary-rgb), .55) !important;
}
html.cc-tml-paper .btn-outline-primary:hover,
html.cc-tml-paper .btn-outline-primary:focus{
  background: rgba(var(--cc-primary-rgb), .10) !important;
  color: var(--cc-primary-700) !important;
  border-color: var(--cc-primary-600) !important;
}

html.cc-tml-paper .btn-link{ color: var(--cc-primary-600) !important; }
html.cc-tml-paper .btn-link:hover,
html.cc-tml-paper .btn-link:focus{ color: var(--cc-primary-700) !important; text-decoration: underline; }
html.cc-tml-paper .btn-link:focus,
html.cc-tml-paper .btn-link.focus{ box-shadow: 0 0 0 .2rem var(--cc-focus) !important; }

/* Pagination */
html.cc-tml-paper .page-item.active .page-link{
  z-index: 1;
  color: #fff;
  background-color: var(--cc-primary-600);
  border-color: var(--cc-primary-600);
}
html.cc-tml-paper .page-link{ color: var(--cc-primary-700); }
html.cc-tml-paper .page-link:hover{ color: var(--cc-primary-700); background: rgba(var(--cc-primary-rgb), .06); }
html.cc-tml-paper .page-link:focus{ box-shadow: 0 0 0 .2rem var(--cc-focus); }

/* Forms */
html.cc-tml-paper .form-control,
html.cc-tml-paper .custom-select{
  border-radius: 10px;
  border: 1px solid var(--cc-border-strong);
}
html.cc-tml-paper .form-control:focus,
html.cc-tml-paper .custom-select:focus{
  border-color: rgba(var(--cc-primary-rgb), .55);
  box-shadow: 0 0 0 .2rem var(--cc-focus);
}
html.cc-tml-paper .form-control-no-border{ border-color: transparent !important; }

/* Input groups */
html.cc-tml-paper .input-group-text{
  border-radius: 10px;
  border: 1px solid var(--cc-border-strong);
  background: rgba(var(--cc-primary-rgb), .06);
  color: var(--cc-primary-700);
}

/* Dropdowns */
html.cc-tml-paper .dropdown-menu{
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow-lg);

  /* UX FIX (system-wide): keep dropdown z-index below Bootstrap modals */
  z-index: 1000;
}

/* UX FIX (system-wide): if any CSS/JS removes .show, menu MUST be hidden */
html.cc-tml-paper .dropdown-menu:not(.show){
  display: none !important;
}

html.cc-tml-paper .dropdown-item:active{
  background: rgba(var(--cc-primary-rgb), 0.12);
  color: var(--cc-text);
}

/* Compact density */
html.cc-tml-paper[data-cc-density="compact"] .card-body{ padding: 14px; }
html.cc-tml-paper[data-cc-density="compact"] .sidebar-link{ padding: 9px 11px; }