/* ===========================================================
   DeskStrap — Bootstrap 5 Desktop/Compact Dark Skin
   Drop AFTER Bootstrap. No build tools.

   IMPORTANT: Load dark.css BEFORE this file to customize colors:
   <link href="./dark.css" rel="stylesheet">
   <link href="./desk.css" rel="stylesheet">
   =========================================================== */

/* ---------- Core variables (compact + flatter) ---------- */
/* NOTE: Color variables are defined in dark.css */
/* This file only defines fallback values if dark.css is not loaded */


/* ---------- Global base ---------- */
html,body{
  height:100%;
  font-family:var(--bs-body-font-family);
  font-size:var(--bs-body-font-size);
  line-height:var(--bs-body-line-height);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-weight:400;
  letter-spacing:0.01em;
}
a{color:var(--bs-primary);}
a:hover{opacity:.8;}
hr{border-color:var(--ds-border);opacity:1}

/* Scrollbar (Chromium/WebKit) */
*::-webkit-scrollbar{height:12px;width:12px}

/* Code blocks */
code,kbd,pre,samp{
  border:1px solid var(--ds-border);border-radius:.125rem;padding:.125rem .35rem;
  font-family:"Consolas","Monaco","Courier New",monospace;
  font-size:0.85em;
}
pre code{border:0;padding:0;background:transparent}

/* ---------- Containers & panels ---------- */
.card,
.dropdown-menu,
.modal-content,
.offcanvas,
.toast,
.list-group,
.table,
.form-control,
.form-select,
.input-group-text,
.nav-tabs .nav-link,
.navbar,
.accordion-item{
  background-color:var(--ds-panel);
  border-color:var(--ds-border);
  box-shadow:none;
  color:var(--bs-body-color);
}
.card{box-shadow:var(--ds-shadow);border-radius:var(--bs-border-radius)}
.card-header,.card-footer{
  background-color:var(--ds-panel-soft);border-color:var(--ds-border);padding:.7rem .85rem;
  font-size:0.875rem;font-weight:600;
}
.card-title{font-size:1.0625rem;font-weight:600;letter-spacing:0.01em}
.card-text{font-size:0.9375rem}

/* Text */
.text-muted,.form-text,.form-check-label,.form-label,.input-group-text{color:var(--ds-text-muted)!important}
.form-text{font-size:0.8125rem}
.form-check-label{font-size:0.875rem}

/* ---------- Navbar ---------- */
.navbar{
  background:var(--ds-navbar-bg)!important;
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ds-border);
  padding-top:.45rem;padding-bottom:.45rem;
}
.navbar .navbar-brand{color:var(--ds-navbar-brand-color);font-size:1.0625rem;font-weight:600;letter-spacing:0.02em}
.navbar .nav-link{
  border-radius:.125rem;
  color:var(--ds-text-muted)!important;
  padding:.35rem .6rem;
  font-size:0.875rem;font-weight:500;
}
.navbar .nav-link:hover,.navbar .nav-link.active{
  color:var(--ds-navbar-link-active-color)!important;background:var(--ds-bg-elev);
}

/* ---------- Buttons (desktop chips) ---------- */
.btn{
  border:none!important;line-height:1.25;border-radius:.25rem;
  font-size:0.875rem;font-weight:500;letter-spacing:0.02em;
  padding:.4rem .85rem;
  transition:all .15s ease;
}
.btn-sm{font-size:0.8125rem;padding:.3rem .6rem}
.btn-lg{font-size:1rem;padding:.55rem 1.1rem}
.btn:hover{opacity:.9}
.btn:active{opacity:1}
.btn:focus-visible{box-shadow:var(--ds-focus-ring)!important}

/* Default/neutral chip */
.btn-default{background-color:var(--ds-neutral)!important;color:var(--ds-btn-default-color)!important}
.btn-default:hover,.btn-default:focus{background-color:var(--ds-neutral-hover)!important;color:var(--ds-btn-default-hover-color)!important}

/* Variants */
.btn-primary{background-color:var(--bs-primary)!important;color:var(--ds-btn-primary-color)!important}
.btn-primary:hover,.btn-primary:focus{background-color:var(--bs-primary-hover)!important}

.btn-secondary{background-color:var(--bs-secondary)!important;color:var(--ds-btn-secondary-color)!important}
.btn-secondary:hover,.btn-secondary:focus{background-color:var(--bs-secondary-hover)!important;color:var(--ds-btn-secondary-hover-color)!important}

.btn-success{background-color:var(--bs-success)!important;color:var(--ds-btn-success-color)!important}
.btn-success:hover,.btn-success:focus{background-color:var(--bs-success-hover)!important}

.btn-info{background-color:var(--bs-info)!important;color:var(--ds-btn-info-color)!important}
.btn-info:hover,.btn-info:focus{background-color:var(--bs-info-hover)!important}

.btn-warning{background-color:var(--bs-warning)!important;color:var(--ds-btn-warning-color)!important}
.btn-warning:hover,.btn-warning:focus{background-color:var(--bs-warning-hover)!important;color:var(--ds-btn-warning-hover-color)!important}

.btn-danger{background-color:var(--bs-danger)!important;color:var(--ds-btn-danger-color)!important}
.btn-danger:hover,.btn-danger:focus{background-color:var(--bs-danger-hover)!important}

/* Outline that reads on dark */
.btn-outline-secondary{
  color:var(--ds-btn-outline-color)!important;background-color:transparent!important;border:1px solid var(--ds-border)!important;
}
.btn-outline-secondary:hover,.btn-outline-secondary:focus{background-color:var(--ds-btn-outline-hover-bg)!important}

/* Button groups */
.btn-group .btn{border-radius:0}
.btn-group>.btn:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}
.btn-group>.btn:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}

/* ---------- Badges ---------- */
.badge{
  border-radius:.25rem;padding:.25rem .55rem;
  font-size:0.75rem;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;
}
.badge.bg-primary{background:var(--bs-primary)!important}
.badge.bg-secondary{background:var(--bs-secondary)!important}

/* ---------- Forms ---------- */
.form-label{margin-bottom:.25rem;font-size:0.875rem;font-weight:500}
.form-control,.form-select{
  background-color:var(--ds-input-bg);border-color:var(--ds-border);color:var(--ds-input-color);
  padding:.5rem .7rem;border-radius:.25rem;
  font-size:0.875rem;
}
.form-control-sm{font-size:0.8125rem;padding:.35rem .55rem}
.form-control-lg{font-size:1rem;padding:.6rem .85rem}
.form-control[type="file"]{color:var(--ds-input-color)}
.form-control[type="file"]::file-selector-button{
  background-color:var(--ds-neutral);
  color:var(--ds-input-color);
  border:none;
  padding:.45rem .7rem;
  margin-right:.75rem;
  border-radius:.25rem;
  font-weight:500;
  cursor:pointer;
  transition:background-color .12s;
}
.form-control[type="file"]::-webkit-file-upload-button{
  background-color:var(--ds-neutral);
  color:var(--ds-input-color);
  border:none;
  padding:.45rem .7rem;
  margin-right:.75rem;
  border-radius:.25rem;
  font-weight:500;
  cursor:pointer;
  transition:background-color .12s;
}
.form-control[type="file"]::file-selector-button:hover,
.form-control[type="file"]::-webkit-file-upload-button:hover{
  background-color:var(--ds-neutral-hover);
  color:var(--ds-input-color);
}

/* Date & Time Input Styling */
.form-control[type="date"],
.form-control[type="time"],
.form-control[type="datetime-local"],
.form-control[type="month"],
.form-control[type="week"]{
  color:var(--ds-input-color);
  color-scheme:var(--ds-color-scheme);
}
.form-control[type="date"]::-webkit-calendar-picker-indicator,
.form-control[type="time"]::-webkit-calendar-picker-indicator,
.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator,
.form-control[type="month"]::-webkit-calendar-picker-indicator,
.form-control[type="week"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
  opacity:.7;
  cursor:pointer;
}
.form-control[type="date"]::-webkit-calendar-picker-indicator:hover,
.form-control[type="time"]::-webkit-calendar-picker-indicator:hover,
.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.form-control[type="month"]::-webkit-calendar-picker-indicator:hover,
.form-control[type="week"]::-webkit-calendar-picker-indicator:hover{
  opacity:1;
}
.form-control[type="color"]{
  padding:.25rem;
  height:38px;
}
.form-control::placeholder,.form-select::placeholder{
  color:var(--ds-input-placeholder);
  opacity:1;
}
.form-control:focus,.form-select:focus{
  background-color:var(--ds-input-focus-bg);border-color:var(--bs-primary);box-shadow:var(--ds-focus-ring);
}
.form-control.is-invalid,.form-select.is-invalid{
  border-color:var(--bs-danger);
}
.form-control.is-invalid:focus,.form-select.is-invalid:focus{
  border-color:var(--bs-danger);box-shadow:var(--ds-invalid-focus-shadow);
}
.form-control.is-valid,.form-select.is-valid{
  border-color:var(--bs-success);
}
.form-control.is-valid:focus,.form-select.is-valid:focus{
  border-color:var(--bs-success);box-shadow:var(--ds-valid-focus-shadow);
}
.invalid-feedback{color:var(--ds-invalid-feedback);font-size:.875rem}
.valid-feedback{color:var(--ds-valid-feedback);font-size:.875rem}
.form-check-input{background-color:var(--ds-check-bg);border-color:var(--ds-border)}
.form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-primary)}
.form-check-input:focus{box-shadow:var(--ds-check-focus-shadow)}
.input-group-text{background-color:var(--ds-input-group-bg);border-color:var(--ds-border);padding:.45rem .6rem}

/* ---------- Dropdowns ---------- */
.dropdown-menu{border-radius:.25rem;box-shadow:var(--ds-shadow);padding:.25rem;font-size:0.875rem}
.dropdown-item{border-radius:.125rem;color:var(--ds-dropdown-item-color);padding:.45rem .8rem;font-weight:400}
.dropdown-item:hover,.dropdown-item:focus{background-color:var(--ds-dropdown-item-hover-bg);color:var(--ds-dropdown-item-hover-color)}
.dropdown-item.active{background-color:var(--bs-primary);color:var(--ds-dropdown-item-active-color)}

/* ---------- Tabs ---------- */
.nav-tabs{border-bottom-color:var(--ds-border);gap:.25rem}
.nav-tabs .nav-link{
  border:1px solid var(--ds-border);border-bottom:0;background:var(--ds-tab-bg);
  color:var(--ds-text-muted);padding:.55rem .75rem;border-radius:.125rem .125rem 0 0;
  font-size:0.875rem;font-weight:500;
}
.nav-tabs .nav-link:hover{
  background:var(--ds-tab-hover-bg);border-color:var(--ds-border);color:var(--ds-tab-hover-color);
}
.nav-tabs .nav-link.active{color:var(--ds-tab-active-color);background:var(--ds-panel);border-color:var(--ds-border)}
.tab-content{
  background:var(--ds-panel);border:1px solid var(--ds-border);border-top:0;border-radius:0 0 .125rem .125rem;padding:.75rem;
  font-size:0.9375rem;
}

/* ---------- Nav pills ---------- */
.nav-pills .nav-link{
  background:var(--ds-pill-bg);color:var(--ds-text-muted);border:1px solid var(--ds-border);border-radius:.25rem;
  font-size:0.875rem;font-weight:500;padding:.45rem .7rem;
}
.nav-pills .nav-link:hover{background:var(--ds-pill-hover-bg);border-color:var(--ds-border);color:var(--ds-pill-hover-color)}
.nav-pills .nav-link.active{background:var(--bs-primary);color:var(--ds-pill-active-color);border-color:transparent}

/* ---------- Accordion ---------- */
.accordion-item{border-radius:.25rem;overflow:hidden}
.accordion-button{background:var(--ds-panel-soft);color:var(--ds-accordion-color);border-color:var(--ds-border)}
.accordion-button:hover{background:var(--ds-accordion-hover-bg);color:var(--ds-accordion-hover-color)}
.accordion-button:not(.collapsed){color:var(--ds-accordion-active-color);background:var(--ds-panel-soft);box-shadow:inset 0 -1px 0 var(--ds-border)}
.accordion-button:focus{box-shadow:var(--ds-focus-ring)}

/* ---------- Modal ---------- */
.modal-content{border-radius:.25rem;box-shadow:var(--ds-shadow)}
.modal-header,.modal-footer{background:var(--ds-panel-soft);border-color:var(--ds-border);padding:.7rem .85rem}
.modal-title{font-size:1.0625rem;font-weight:600}
.modal-body{font-size:0.9375rem}
.btn-close{filter:invert(1) grayscale(1);opacity:.7;width:0.6em;height:0.6em;font-size:0.6rem}
.btn-close:hover{opacity:1}
.alert-dismissible .btn-close{padding: 18px 18px;}
/* ---------- Offcanvas ---------- */
.offcanvas{border-left-color:var(--ds-border)}

/* ---------- Tooltip & Popover ---------- */
.tooltip .tooltip-inner{background:var(--ds-panel);color:#e7ecf5;border:1px solid var(--ds-border);box-shadow:var(--ds-shadow);padding:.4rem .6rem}
.tooltip.bs-tooltip-top .tooltip-arrow::before{border-top-color:var(--ds-border)!important}
.tooltip.bs-tooltip-top .tooltip-arrow::after{border-top-color:var(--ds-panel)!important}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before{border-bottom-color:var(--ds-border)!important}
.tooltip.bs-tooltip-bottom .tooltip-arrow::after{border-bottom-color:var(--ds-panel)!important}
.tooltip.bs-tooltip-start .tooltip-arrow::before{border-left-color:var(--ds-border)!important}
.tooltip.bs-tooltip-start .tooltip-arrow::after{border-left-color:var(--ds-panel)!important}
.tooltip.bs-tooltip-end .tooltip-arrow::before{border-right-color:var(--ds-border)!important}
.tooltip.bs-tooltip-end .tooltip-arrow::after{border-right-color:var(--ds-panel)!important}

.popover{background:var(--ds-panel);border-color:var(--ds-border);color:#e7ecf5;box-shadow:var(--ds-shadow)}
.popover-header{background:var(--ds-panel-soft);border-color:var(--ds-border);color:#e7ecf5;font-weight:600}
.popover-body{color:#e7ecf5;background:var(--ds-panel)}
.popover.bs-popover-top>.popover-arrow::before{border-top-color:var(--ds-border)!important}
.popover.bs-popover-top>.popover-arrow::after{border-top-color:var(--ds-panel-soft)!important}
.popover.bs-popover-bottom>.popover-arrow::before{border-bottom-color:var(--ds-border)!important}
.popover.bs-popover-bottom>.popover-arrow::after{border-bottom-color:var(--ds-panel-soft)!important}
.popover.bs-popover-start>.popover-arrow::before{border-left-color:var(--ds-border)!important}
.popover.bs-popover-start>.popover-arrow::after{border-left-color:var(--ds-panel)!important}
.popover.bs-popover-end>.popover-arrow::before{border-right-color:var(--ds-border)!important}
.popover.bs-popover-end>.popover-arrow::after{border-right-color:var(--ds-panel)!important}

/* ---------- Toasts ---------- */
.toast{border-color:var(--ds-border);box-shadow:var(--ds-shadow);border-radius:.25rem;background:var(--ds-panel);color:var(--ds-toast-color)}
.toast-header{background:var(--ds-panel-soft);color:var(--ds-toast-color);border-color:var(--ds-border)}

/* ---------- Alerts ---------- */
.alert{
  border-radius:.25rem;border:1px solid var(--ds-border);
  background:var(--ds-alert-bg);color:var(--ds-alert-color);
  font-size:0.875rem;padding:.7rem .85rem;
}
.alert-primary{background:var(--ds-alert-primary-bg);border-color:var(--ds-alert-primary-border)}
.alert-success{background:var(--ds-alert-success-bg);border-color:var(--ds-alert-success-border)}
.alert-warning{background:var(--ds-alert-warning-bg);border-color:var(--ds-alert-warning-border);color:var(--ds-alert-warning-color)}
.alert-danger{background:var(--ds-alert-danger-bg);border-color:var(--ds-alert-danger-border)}
.alert-info{background:var(--ds-alert-info-bg);border-color:var(--ds-alert-info-border)}

/* ---------- Tables ---------- */
.table{color:var(--ds-table-color)!important;margin-bottom:.75rem;font-size:0.875rem}
.table>:not(caption)>*>*{padding:.55rem .7rem;background-color:transparent;border-bottom-color:var(--ds-border);color:var(--ds-table-color)}
.table thead th{font-weight:600;font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ds-table-color)!important}
.table tbody td{color:var(--ds-table-color)!important}
.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:var(--ds-table-striped-bg);color:var(--ds-table-color)!important}
.table-hover>tbody>tr:hover>*{background-color:var(--ds-table-hover-bg);color:var(--ds-table-hover-color)!important}

/* ---------- Progress ---------- */
.progress{height:.5rem;background:var(--ds-progress-bg);border:1px solid var(--ds-border);border-radius:.125rem}
.progress-bar{background-color:var(--bs-primary)}

/* ---------- Pagination ---------- */
.pagination{gap:.25rem}
.page-link{
  background:var(--ds-page-bg);border-color:var(--ds-border);color:var(--ds-page-color);
  padding:.35rem .6rem;border-radius:.125rem;
}
.page-link:hover{background:var(--ds-page-hover-bg);border-color:var(--ds-border);color:var(--ds-page-hover-color)}
.page-link:focus{box-shadow:var(--ds-focus-ring)}
.page-item.active .page-link{background:var(--bs-primary);border-color:transparent}
.page-item.disabled .page-link{background:var(--ds-page-disabled-bg);color:var(--ds-page-disabled-color);border-color:var(--ds-border)}

/* ---------- List group ---------- */
.list-group-item{background:var(--ds-panel);color:var(--ds-list-item-color);border-color:var(--ds-border);padding:.5rem .65rem;border-radius:.125rem}
.list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}
.list-group-item:last-child{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}
.list-group-item:hover{background:var(--ds-list-item-hover-bg)}
.list-group-item.active{background:var(--bs-primary);border-color:transparent;color:var(--ds-list-item-active-color)}

/* ---------- Breadcrumb ---------- */
.breadcrumb{--bs-breadcrumb-divider-color:var(--ds-text-muted);--bs-breadcrumb-item-active-color:var(--ds-breadcrumb-active-color)}
.breadcrumb-item+.breadcrumb-item::before{color:var(--ds-text-muted)}
.breadcrumb-item a{color:var(--ds-breadcrumb-link-color)}
.breadcrumb-item a:hover{color:var(--ds-breadcrumb-link-hover-color)}

/* ---------- Utilities ---------- */
.shadow{box-shadow:var(--ds-shadow)!important}
.border{border-color:var(--ds-border)!important}
.bg-body{background:var(--bs-body-bg)!important}
.bg-panel{background:var(--ds-panel)!important}
.text-muted{color:var(--ds-text-muted)!important}

/* ---------- Optional compact toggle ---------- */
body.ds-compact :is(.btn,.form-control,.form-select,.input-group-text,.nav-link,.dropdown-item,.list-group-item){
  padding-top:.35rem!important;padding-bottom:.35rem!important;
}