/* Computle Branding Override — System Light/Dark Mode */
@font-face {
  font-family: "Neue Montreal";
  src: url("https://computle.com/fonts/Neue-Montreal-Regular-400.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("https://computle.com/fonts/Neue-Montreal-Medium-500.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

body,
.page-content,
.uk-form label,
.uk-table,
.uk-panel,
.side-nav li a,
.page-title,
.page-head-title,
h1, h2, h3, h4, h5, h6,
p, span, a, input, textarea, select, button,
.ticket-issue,
.comment-text,
.issue-text,
.uk-comment-body,
.md-input,
.no-wrap,
.uk-text-truncate {
  font-family: "Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Primary action buttons */
.md-btn-accent,
.md-btn-flat-accent,
.uk-btn-accent {
  background-color: #0074e2 !important;
  border-color: #0074e2 !important;
}

.md-btn-accent:hover,
.md-btn-flat-accent:hover {
  background-color: #005bb5 !important;
}

/* Selection/link color */
a:not(.md-btn):not(.side-nav-item) {
  color: #0074e2;
}
a:not(.md-btn):not(.side-nav-item):hover {
  color: #005bb5;
}

/* Clean up card borders */
.uk-panel-box {
  border-radius: 8px;
}

/* Status badges */
.ticket-status-open { background-color: #0074e2 !important; }
.ticket-status-pending { background-color: #f59e0b !important; }
.ticket-status-closed { background-color: #34c759 !important; }

.page-head-sub { letter-spacing: -0.01em; }

/* Login page */
body.login-page,
.login-wrapper {
  font-family: "Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* =============================================
   BOTH MODES — Dark sidebar + header
   ============================================= */

/* Top header bar — dark always */
.uk-navbar,
header.uk-navbar,
#topbar {
  background-color: #1d1d1f !important;
}
.uk-navbar-nav > li > a,
.uk-navbar-flip .uk-navbar-nav > li > a,
#topbar a,
#topbar .uk-navbar-nav > li > a {
  color: #f5f5f7 !important;
}

/* Sidebar — dark always */
.sidebar {
  background-color: #1d1d1f !important;
}
.sidebar .side-nav li a,
.sidebar .side-nav li a span,
.sidebar .side-nav li a i,
.sidebar ul.side-nav li a,
.sidebar a {
  color: #e0e0e5 !important;
  fill: #e0e0e5 !important;
}
.sidebar .side-nav li a:hover,
.sidebar ul.side-nav li a:hover {
  background-color: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}
.sidebar .side-nav li.active a,
.sidebar .side-nav li.active a span,
.sidebar .side-nav li.active a i {
  color: #ffffff !important;
  fill: #ffffff !important;
  background-color: rgba(255,255,255,0.12) !important;
}
.sidebar .side-nav-bottom-panel {
  background-color: #1d1d1f !important;
}
.sidebar .side-nav-bottom-panel a {
  color: #e0e0e5 !important;
}
/* Submenu/subnav */
.side-nav-sub,
.tether-element .side-nav-sub {
  background-color: #2a2a2e !important;
}
.side-nav-sub a,
.side-nav-sub a span,
.side-nav-sub a i {
  color: #e0e0e5 !important;
}
.side-nav-sub a:hover {
  background-color: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

/* =============================================
   DARK MODE (system preference)
   ============================================= */
@media (prefers-color-scheme: dark) {

  /* ---- Global backgrounds ---- */
  body,
  html {
    background-color: #141416 !important;
    color: #e0e0e5 !important;
  }

  #page-content,
  .page-content,
  .page-content.no-border-top,
  .scrollable,
  .full-height {
    background-color: #141416 !important;
    color: #e0e0e5 !important;
  }

  /* ---- Page title bar (Tickets header, etc.) ---- */
  .page-title,
  .uk-width-1-1.page-title,
  .dt-borderBottom,
  .noshadow {
    background-color: #1d1d1f !important;
    color: #e0e0e5 !important;
    border-bottom-color: #2a2a2e !important;
  }

  .page-title p,
  .page-title span,
  .page-title a,
  .page-head-title {
    color: #e0e0e5 !important;
  }

  /* ---- All generic text ---- */
  p, span, label, div, li, td, th, a,
  h1, h2, h3, h4, h5, h6,
  .text-light,
  .text-muted,
  .uk-text-muted,
  .uk-comment-body,
  .ticket-issue,
  .comment-text,
  .issue-text,
  .no-wrap,
  .uk-text-truncate,
  .page-head-sub,
  .uk-text-small {
    color: #e0e0e5 !important;
  }

  /* Muted/secondary text */
  .text-muted,
  .uk-text-muted,
  .page-head-sub,
  .uk-text-small,
  time {
    color: #8e8e93 !important;
  }

  /* ---- Tickets container ---- */
  #tickets-container,
  #tickets-container > div {
    background-color: #141416 !important;
  }

  /* ---- Tables (ticket list, etc.) ---- */
  table,
  .uk-table,
  .pDataTable,
  table.uk-table {
    background-color: #141416 !important;
    border-color: #2a2a2e !important;
  }

  .uk-table thead,
  .uk-table thead tr,
  table thead,
  table thead tr {
    background-color: #1d1d1f !important;
  }

  .uk-table th,
  table th {
    background-color: #1d1d1f !important;
    color: #8e8e93 !important;
    border-color: #2a2a2e !important;
  }

  .uk-table td,
  table td,
  td.vam,
  td.nbb,
  td.vam.nbb {
    background-color: #141416 !important;
    color: #e0e0e5 !important;
    border-color: #2a2a2e !important;
  }

  /* Ticket rows */
  .uk-table tbody tr,
  table tbody tr,
  tr[class*="ticket-"] {
    background-color: #141416 !important;
    border-color: #2a2a2e !important;
  }

  .uk-table tbody tr:hover,
  table tbody tr:hover,
  tr[class*="ticket-"]:hover {
    background-color: #1d1d1f !important;
  }

  .uk-table-striped tbody tr:nth-of-type(odd),
  table.stripe tbody tr:nth-of-type(odd) {
    background-color: #1a1a1c !important;
  }

  /* Priority border cell */
  td.ticket-priority {
    background-color: #141416 !important;
  }

  /* ---- Pagination & toolbar buttons ---- */
  .pagination a,
  .pagination .btn,
  .button-group .btn,
  .button-group a {
    background-color: #2a2a2e !important;
    color: #e0e0e5 !important;
    border-color: #3a3a3e !important;
  }

  .pagination a:hover,
  .button-group .btn:hover {
    background-color: #3a3a3e !important;
  }

  .pagination-info {
    color: #8e8e93 !important;
  }

  /* ---- Search box ---- */
  .search-box,
  #ticket-search-box {
    background-color: transparent !important;
  }

  .ticket-top-search,
  #tickets_Search,
  .search-box input {
    background-color: #2a2a2e !important;
    color: #e0e0e5 !important;
    border-color: #3a3a3e !important;
  }

  .search-results-container {
    background-color: #2a2a2e !important;
    border-color: #3a3a3e !important;
  }

  /* ---- Dropdowns ---- */
  .uk-dropdown,
  .uk-nav-dropdown,
  .uk-dropdown-small {
    background-color: #2a2a2e !important;
    border-color: #3a3a3e !important;
  }

  .uk-dropdown a,
  .uk-dropdown li a,
  .uk-nav a,
  .uk-topbar a {
    color: #e0e0e5 !important;
  }

  .uk-dropdown a:hover,
  .uk-dropdown li a:hover {
    background-color: #3a3a3e !important;
  }

  .uk-dropdown hr {
    border-color: #3a3a3e !important;
  }

  /* ---- Cards and panels ---- */
  .uk-panel-box,
  .uk-panel,
  .md-card,
  .md-card-content,
  .tru-card,
  .page-content-right,
  .page-content-left {
    background-color: #1d1d1f !important;
    color: #e0e0e5 !important;
    border-color: #2a2a2e !important;
  }

  /* ---- Input fields ---- */
  input,
  textarea,
  select,
  .md-input,
  .uk-form input,
  .uk-form textarea,
  .uk-form select {
    background-color: #2a2a2e !important;
    color: #e0e0e5 !important;
    border-color: #3a3a3e !important;
  }

  input::placeholder,
  textarea::placeholder,
  .md-input::placeholder {
    color: #6e6e73 !important;
  }

  input:focus,
  textarea:focus,
  select:focus,
  .md-input:focus {
    border-color: #0074e2 !important;
  }

  /* ---- Ticket detail page ---- */
  .ticket-body,
  .ticket-right,
  .ticket-details,
  .ticket-assignee,
  #issue-text,
  .issue-body,
  .issue-text,
  .ticket-reply,
  .reply-body,
  .ticket-comment,
  .comment-container,
  .ticket-comments,
  .uk-comment,
  .uk-comment-body {
    background-color: #1d1d1f !important;
    color: #e0e0e5 !important;
    border-color: #2a2a2e !important;
  }

  /* Comment reply editor area */
  .comment-reply,
  .reply-comment-box,
  .ticket-reply-comment,
  .tru-editor,
  .editor-container,
  .ql-container,
  .ql-editor,
  .ql-toolbar,
  .ql-snow,
  .CodeMirror,
  .CodeMirror-scroll,
  [contenteditable="true"],
  .editor,
  .note-editor,
  .note-editable,
  #commentReply,
  #reply-text,
  .reply-text-area,
  .easymde-container,
  .EasyMDEContainer,
  .CodeMirror-wrap,
  .editor-statusbar {
    background-color: #2a2a2e !important;
    color: #e0e0e5 !important;
    border-color: #3a3a3e !important;
  }

  .ql-toolbar button,
  .ql-toolbar .ql-stroke {
    color: #e0e0e5 !important;
    stroke: #e0e0e5 !important;
  }

  .ql-toolbar .ql-fill {
    fill: #e0e0e5 !important;
  }

  /* Ticket sidebar / right panel */
  .page-side-bar,
  .ticket-sidebar,
  .nopadding-right > div,
  .uk-width-1-4,
  .uk-width-medium-1-4 {
    background-color: #1d1d1f !important;
    border-color: #2a2a2e !important;
  }

  /* Ticket metadata rows */
  .tru-list,
  .tru-list li,
  .ticket-details-list,
  .ticket-details-list li {
    background-color: #1d1d1f !important;
    color: #e0e0e5 !important;
    border-color: #2a2a2e !important;
  }

  /* ---- Buttons ---- */
  .md-btn:not(.md-btn-accent):not(.md-btn-flat-accent),
  .btn:not(.md-btn-accent) {
    background-color: #2a2a2e !important;
    color: #e0e0e5 !important;
    border-color: #3a3a3e !important;
  }

  .md-btn:not(.md-btn-accent):hover,
  .btn:not(.md-btn-accent):hover {
    background-color: #3a3a3e !important;
  }

  /* ---- Modal / dialog ---- */
  .uk-modal-dialog,
  .uk-modal-header,
  .uk-modal-footer,
  .uk-modal-body {
    background-color: #1d1d1f !important;
    color: #e0e0e5 !important;
    border-color: #2a2a2e !important;
  }

  .uk-modal-dialog input,
  .uk-modal-dialog textarea,
  .uk-modal-dialog select {
    background-color: #2a2a2e !important;
    color: #e0e0e5 !important;
    border-color: #3a3a3e !important;
  }

  /* ---- Tabs ---- */
  .uk-tab > li > a {
    color: #8e8e93 !important;
  }
  .uk-tab > li.uk-active > a {
    color: #e0e0e5 !important;
    border-bottom-color: #0074e2 !important;
  }

  /* ---- Borders and separators ---- */
  hr,
  .uk-grid-divider > [class*='uk-width-']:not(:first-child)::before,
  .nopadding .uk-width-1-1,
  [class*="border"],
  .dt-borderBottom {
    border-color: #2a2a2e !important;
  }

  /* ---- SVG icons ---- */
  svg path,
  svg polyline {
    stroke: #8e8e93 !important;
  }

  .svgcheck svg path,
  .svgcheck svg polyline {
    stroke: #6e6e73 !important;
  }

  i.fa,
  i.material-icons {
    color: #8e8e93 !important;
  }

  /* ---- Scrollbars ---- */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #1d1d1f;
  }
  ::-webkit-scrollbar-thumb {
    background: #3a3a3e;
    border-radius: 4px;
  }

  /* ---- Login page ---- */
  body.login-page {
    background-color: #141416 !important;
  }
  .login-wrapper,
  .login-box,
  .login-form {
    background-color: #1d1d1f !important;
    color: #e0e0e5 !important;
  }

  /* ---- Links ---- */
  a:not(.md-btn):not(.side-nav-item) {
    color: #4da6ff;
  }
  a:not(.md-btn):not(.side-nav-item):hover {
    color: #7dbfff;
  }

  /* ---- Notices / alerts ---- */
  .uk-alert,
  .uk-notify-message {
    background-color: #2a2a2e !important;
    color: #e0e0e5 !important;
    border-color: #3a3a3e !important;
  }

  /* ---- Dashboard widgets ---- */
  .dashboard-widget,
  .card,
  .uk-panel-box-secondary {
    background-color: #1d1d1f !important;
    color: #e0e0e5 !important;
    border-color: #2a2a2e !important;
  }

  /* ---- Catch-all for anything with white/light backgrounds ---- */
  [style*="background-color: rgb(255"],
  [style*="background-color: white"],
  [style*="background: rgb(255"],
  [style*="background: white"],
  [style*="background-color: #fff"],
  [style*="background-color: #FFF"],
  [style*="background: #fff"],
  [style*="background: #FFF"] {
    background-color: #1d1d1f !important;
  }

  [style*="color: rgb(0, 0, 0)"],
  [style*="color: #000"],
  [style*="color: black"] {
    color: #e0e0e5 !important;
  }
}