/* =========================================================
   CYBER PANEL DARK BOOTSTRAP THEME
   Built for Bootstrap v3.3.7 / PerfectPanel-like layouts
   Put this file as bootstrap.css replacement.
   ========================================================= */

:root {
  --bg: #060a11;
  --bg-2: #080d16;
  --surface: #0b1220;
  --surface-2: #0f1828;
  --surface-3: #121d30;
  --border: rgba(148, 163, 184, .16);
  --border-strong: rgba(56, 189, 248, .32);
  --text: #dbeafe;
  --text-soft: #94a3b8;
  --text-muted: #64748b;
  --accent: #38bdf8;
  --accent-2: #22d3ee;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #38bdf8;
}

html {
  background: var(--bg) !important;
}

body {
  font-family: Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--text) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(56,189,248,.12), transparent 34%),
    radial-gradient(circle at 82% 12%, rgba(34,211,238,.08), transparent 30%),
    linear-gradient(180deg, #070b13 0%, var(--bg) 42%, #05080e 100%) !important;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* base */
a { color: #7dd3fc !important; text-decoration: none !important; }
a:hover, a:focus { color: #e0f2fe !important; text-decoration: none !important; outline: none !important; }
hr { border-top-color: var(--border) !important; }
mark, .mark { color: #0f172a !important; background-color: #fde68a !important; }
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: #7dd3fc !important; }
.text-success { color: #86efac !important; }
.text-info { color: #67e8f9 !important; }
.text-warning { color: #fcd34d !important; }
.text-danger { color: #fca5a5 !important; }
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger {
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.bg-primary { background: rgba(56,189,248,.14) !important; }
.bg-success { background: rgba(34,197,94,.14) !important; }
.bg-info { background: rgba(34,211,238,.14) !important; }
.bg-warning { background: rgba(245,158,11,.14) !important; }
.bg-danger { background: rgba(239,68,68,.14) !important; }
.page-header { border-bottom-color: var(--border) !important; }
blockquote { border-left-color: var(--border-strong) !important; color: #cbd5e1 !important; }
blockquote footer, blockquote small, blockquote .small { color: var(--text-muted) !important; }
legend { color: var(--text) !important; border-bottom-color: var(--border) !important; }
caption { color: var(--text-muted) !important; }

/* typography */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color: #f8fafc !important; font-weight: 650 !important; letter-spacing: -.02em; }
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,
.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,
h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,
.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small { color: var(--text-muted) !important; }
label { color: #cbd5e1 !important; font-weight: 600 !important; }

/* images / thumbnails */
.img-thumbnail, .thumbnail {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: 12px !important;
}
.thumbnail .caption { color: var(--text) !important; }

/* code */
code {
  color: #a5f3fc !important;
  background: rgba(34,211,238,.10) !important;
  border: 1px solid rgba(34,211,238,.12) !important;
  border-radius: 6px !important;
}
kbd {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08) !important;
}
pre {
  color: #dbeafe !important;
  background: #08111f !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
pre code { color: inherit !important; background: transparent !important; border: 0 !important; }

/* navbar */
.navbar {
  min-height: 58px !important;
  margin-bottom: 24px !important;
  border-radius: 0 !important;
  border: 0 !important;
}
.navbar-default, .navbar-inverse {
  background: rgba(8, 13, 22, .92) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(14px);
}
.navbar-default .navbar-brand, .navbar-inverse .navbar-brand {
  color: #f8fafc !important;
  font-weight: 750 !important;
  letter-spacing: -.02em !important;
  height: 58px !important;
  padding: 18px 15px !important;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus,
.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { color: #7dd3fc !important; }
.navbar-default .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a {
  color: #cbd5e1 !important;
  height: 58px !important;
  padding-top: 19px !important;
  padding-bottom: 19px !important;
  font-weight: 550 !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #f8fafc !important;
  background: rgba(56,189,248,.08) !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #f8fafc !important;
  background: rgba(56,189,248,.12) !important;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #f8fafc !important;
  background: rgba(15,23,42,.96) !important;
}
.navbar-default .navbar-toggle, .navbar-inverse .navbar-toggle {
  border-color: var(--border) !important;
  background: rgba(255,255,255,.03) !important;
  margin-top: 12px !important;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background: rgba(56,189,248,.10) !important; }
.navbar-default .navbar-toggle .icon-bar, .navbar-inverse .navbar-toggle .icon-bar { background: #cbd5e1 !important; }
.navbar-default .navbar-collapse, .navbar-default .navbar-form,
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: var(--border) !important; }
.navbar-default .navbar-text, .navbar-inverse .navbar-text { color: var(--text-soft) !important; }
.navbar-default .navbar-link, .navbar-inverse .navbar-link { color: #7dd3fc !important; }

/* dropdowns */
.dropdown-menu {
  background: #0b1220 !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 54px rgba(0,0,0,.42) !important;
  padding: 8px !important;
}
.dropdown-menu > li > a {
  color: #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #f8fafc !important;
  background: rgba(56,189,248,.10) !important;
}
.dropdown-menu .divider { background-color: var(--border) !important; }
.dropdown-header { color: var(--text-muted) !important; }

/* forms */
.form-control {
  color: #e2e8f0 !important;
  background: #080f1c !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
  height: 40px !important;
}
.form-control:focus {
  border-color: rgba(56,189,248,.75) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.12), inset 0 1px 0 rgba(255,255,255,.04) !important;
  background: #0a1322 !important;
}
.form-control::-moz-placeholder { color: #64748b !important; opacity: 1 !important; }
.form-control:-ms-input-placeholder { color: #64748b !important; }
.form-control::-webkit-input-placeholder { color: #64748b !important; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  background: #111827 !important;
  color: #64748b !important;
  border-color: rgba(148,163,184,.10) !important;
}
textarea.form-control { height: auto !important; min-height: 120px; }
.input-sm { height: 32px !important; border-radius: 8px !important; }
.input-lg { height: 48px !important; border-radius: 12px !important; }
.input-group-addon {
  color: #cbd5e1 !important;
  background: #0f172a !important;
  border-color: var(--border) !important;
  border-radius: 10px !important;
}
.has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox,
.has-success .radio-inline, .has-success .checkbox-inline,
.has-success.radio label, .has-success.checkbox label,
.has-success.radio-inline label, .has-success.checkbox-inline label { color: #86efac !important; }
.has-success .form-control { border-color: rgba(34,197,94,.6) !important; }
.has-warning .help-block, .has-warning .control-label, .has-warning .radio, .has-warning .checkbox,
.has-warning .radio-inline, .has-warning .checkbox-inline,
.has-warning.radio label, .has-warning.checkbox label,
.has-warning.radio-inline label, .has-warning.checkbox-inline label { color: #fcd34d !important; }
.has-warning .form-control { border-color: rgba(245,158,11,.6) !important; }
.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox,
.has-error .radio-inline, .has-error .checkbox-inline,
.has-error.radio label, .has-error.checkbox label,
.has-error.radio-inline label, .has-error.checkbox-inline label { color: #fca5a5 !important; }
.has-error .form-control { border-color: rgba(239,68,68,.65) !important; }
.help-block { color: var(--text-muted) !important; }

/* buttons */
.btn {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease !important;
}
.btn:hover { transform: translateY(-1px); }
.btn:active, .btn.active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,.22) !important; }
.btn-default {
  color: #e2e8f0 !important;
  background: #111827 !important;
  border-color: var(--border) !important;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #f8fafc !important;
  background: #172033 !important;
  border-color: rgba(148,163,184,.28) !important;
}
.btn-primary {
  color: #04111f !important;
  background: linear-gradient(135deg, #67e8f9, #38bdf8) !important;
  border-color: transparent !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.open > .dropdown-toggle.btn-primary { color: #020617 !important; background: linear-gradient(135deg, #a5f3fc, #7dd3fc) !important; }
.btn-success { color: #052e16 !important; background: linear-gradient(135deg, #86efac, #22c55e) !important; border-color: transparent !important; }
.btn-info { color: #082f49 !important; background: linear-gradient(135deg, #67e8f9, #06b6d4) !important; border-color: transparent !important; }
.btn-warning { color: #451a03 !important; background: linear-gradient(135deg, #fcd34d, #f59e0b) !important; border-color: transparent !important; }
.btn-danger { color: #450a0a !important; background: linear-gradient(135deg, #fca5a5, #ef4444) !important; border-color: transparent !important; }
.btn-link { color: #7dd3fc !important; border-color: transparent !important; background: transparent !important; }
.btn[disabled], .btn.disabled, fieldset[disabled] .btn { opacity: .45 !important; transform: none !important; }

/* tables */
table { background-color: transparent !important; }
.table {
  color: #dbeafe !important;
  background: rgba(11,18,32,.55) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td { border-top-color: var(--border) !important; }
.table > thead > tr > th { color: #f8fafc !important; border-bottom-color: rgba(148,163,184,.22) !important; background: rgba(15,23,42,.88) !important; }
.table > tbody + tbody { border-top-color: var(--border) !important; }
.table .table { background-color: #0b1220 !important; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border-color: var(--border) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(148,163,184,.035) !important; }
.table-hover > tbody > tr:hover { background-color: rgba(56,189,248,.07) !important; }
.table > thead > tr > td.active, .table > tbody > tr > td.active, .table > tfoot > tr > td.active,
.table > thead > tr > th.active, .table > tbody > tr > th.active, .table > tfoot > tr > th.active,
.table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tfoot > tr.active > td,
.table > thead > tr.active > th, .table > tbody > tr.active > th, .table > tfoot > tr.active > th { background-color: rgba(148,163,184,.08) !important; }
.table > thead > tr > td.success, .table > tbody > tr > td.success, .table > tfoot > tr > td.success,
.table > thead > tr > th.success, .table > tbody > tr > th.success, .table > tfoot > tr > th.success,
.table > thead > tr.success > td, .table > tbody > tr.success > td, .table > tfoot > tr.success > td,
.table > thead > tr.success > th, .table > tbody > tr.success > th, .table > tfoot > tr.success > th { background-color: rgba(34,197,94,.13) !important; }
.table > thead > tr > td.info, .table > tbody > tr > td.info, .table > tfoot > tr > td.info,
.table > thead > tr > th.info, .table > tbody > tr > th.info, .table > tfoot > tr > th.info,
.table > thead > tr.info > td, .table > tbody > tr.info > td, .table > tfoot > tr.info > td,
.table > thead > tr.info > th, .table > tbody > tr.info > th, .table > tfoot > tr.info > th { background-color: rgba(56,189,248,.13) !important; }
.table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning,
.table > thead > tr > th.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > th.warning,
.table > thead > tr.warning > td, .table > tbody > tr.warning > td, .table > tfoot > tr.warning > td,
.table > thead > tr.warning > th, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > th { background-color: rgba(245,158,11,.13) !important; }
.table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger,
.table > thead > tr > th.danger, .table > tbody > tr > th.danger, .table > tfoot > tr > th.danger,
.table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td,
.table > thead > tr.danger > th, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > th { background-color: rgba(239,68,68,.13) !important; }
.table-responsive { border-color: var(--border) !important; }

/* navs / tabs / pills */
.nav > li > a:hover, .nav > li > a:focus { background: rgba(56,189,248,.08) !important; }
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background: rgba(56,189,248,.10) !important; border-color: var(--border) !important; }
.nav-tabs { border-bottom-color: var(--border) !important; }
.nav-tabs > li > a { border-radius: 10px 10px 0 0 !important; color: #cbd5e1 !important; }
.nav-tabs > li > a:hover { border-color: transparent !important; background: rgba(56,189,248,.08) !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: #f8fafc !important;
  background: #0b1220 !important;
  border-color: var(--border) !important;
  border-bottom-color: #0b1220 !important;
}
.nav-pills > li > a { border-radius: 10px !important; color: #cbd5e1 !important; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #020617 !important; background: #38bdf8 !important; }

/* pagination / pager */
.pagination > li > a, .pagination > li > span,
.pager li > a, .pager li > span {
  color: #cbd5e1 !important;
  background: #0b1220 !important;
  border-color: var(--border) !important;
}
.pagination > li > a:hover, .pagination > li > span:hover,
.pagination > li > a:focus, .pagination > li > span:focus,
.pager li > a:hover, .pager li > a:focus {
  color: #f8fafc !important;
  background: rgba(56,189,248,.10) !important;
  border-color: rgba(56,189,248,.30) !important;
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover,
.pagination > .active > a:focus, .pagination > .active > span:focus {
  color: #020617 !important;
  background: #38bdf8 !important;
  border-color: #38bdf8 !important;
}
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus,
.pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus,
.pager .disabled > a, .pager .disabled > a:hover, .pager .disabled > a:focus,
.pager .disabled > span { color: #475569 !important; background: #0b1220 !important; border-color: var(--border) !important; }

/* labels / badges */
.label { border-radius: 999px !important; font-weight: 700 !important; }
.label-default, .badge { background: #334155 !important; color: #e2e8f0 !important; }
.label-primary { background: #38bdf8 !important; color: #020617 !important; }
.label-success { background: #22c55e !important; color: #052e16 !important; }
.label-info { background: #06b6d4 !important; color: #082f49 !important; }
.label-warning { background: #f59e0b !important; color: #451a03 !important; }
.label-danger { background: #ef4444 !important; color: #450a0a !important; }

/* alerts */
.alert { border-radius: 12px !important; border-color: var(--border) !important; color: var(--text) !important; }
.alert-success { background: rgba(34,197,94,.12) !important; border-color: rgba(34,197,94,.25) !important; color: #bbf7d0 !important; }
.alert-info { background: rgba(56,189,248,.12) !important; border-color: rgba(56,189,248,.25) !important; color: #bae6fd !important; }
.alert-warning { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.25) !important; color: #fde68a !important; }
.alert-danger { background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.25) !important; color: #fecaca !important; }
.alert .alert-link { color: #f8fafc !important; }

/* progress */
.progress { background: #111827 !important; border-radius: 999px !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.25) !important; }
.progress-bar { background: linear-gradient(90deg,#22d3ee,#38bdf8) !important; color: #020617 !important; box-shadow: none !important; }
.progress-bar-success { background: linear-gradient(90deg,#86efac,#22c55e) !important; }
.progress-bar-info { background: linear-gradient(90deg,#67e8f9,#06b6d4) !important; }
.progress-bar-warning { background: linear-gradient(90deg,#fcd34d,#f59e0b) !important; }
.progress-bar-danger { background: linear-gradient(90deg,#fca5a5,#ef4444) !important; }

/* panels / wells / list groups */
.panel, .well, .jumbotron {
  background: rgba(11,18,32,.86) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035) !important;
  color: var(--text) !important;
}
.panel-heading {
  color: #f8fafc !important;
  background: rgba(15,23,42,.82) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 16px 16px 0 0 !important;
  font-weight: 700 !important;
}
.panel-footer {
  background: rgba(15,23,42,.72) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 16px 16px !important;
}
.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger { border-color: var(--border) !important; }
.panel-primary > .panel-heading { background: rgba(56,189,248,.16) !important; border-color: rgba(56,189,248,.24) !important; }
.panel-success > .panel-heading { background: rgba(34,197,94,.14) !important; border-color: rgba(34,197,94,.24) !important; }
.panel-info > .panel-heading { background: rgba(34,211,238,.14) !important; border-color: rgba(34,211,238,.24) !important; }
.panel-warning > .panel-heading { background: rgba(245,158,11,.14) !important; border-color: rgba(245,158,11,.24) !important; }
.panel-danger > .panel-heading { background: rgba(239,68,68,.14) !important; border-color: rgba(239,68,68,.24) !important; }
.list-group-item {
  color: var(--text) !important;
  background: #0b1220 !important;
  border-color: var(--border) !important;
}
a.list-group-item, button.list-group-item { color: #cbd5e1 !important; }
a.list-group-item:hover, button.list-group-item:hover,
a.list-group-item:focus, button.list-group-item:focus { color: #f8fafc !important; background: rgba(56,189,248,.08) !important; }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { color: #020617 !important; background: #38bdf8 !important; border-color: #38bdf8 !important; }

/* modals */
.modal-content {
  background: #0b1220 !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.58) !important;
  color: var(--text) !important;
}
.modal-header, .modal-footer { border-color: var(--border) !important; }
.modal-title { color: #f8fafc !important; }
.close { color: #cbd5e1 !important; text-shadow: none !important; opacity: .8 !important; }
.close:hover, .close:focus { color: #fff !important; opacity: 1 !important; }
.modal-backdrop { background: #020617 !important; }

/* misc bootstrap components */
.breadcrumb { background: rgba(11,18,32,.82) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; }
.breadcrumb > .active { color: var(--text-muted) !important; }
.popover { background: #0b1220 !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: 0 20px 50px rgba(0,0,0,.42) !important; }
.popover-title { background: #0f172a !important; color: #f8fafc !important; border-bottom-color: var(--border) !important; }
.tooltip-inner { background: #111827 !important; color: #f8fafc !important; }
.carousel-control { color: #f8fafc !important; text-shadow: none !important; }
.carousel-indicators li { border-color: rgba(255,255,255,.45) !important; }
.carousel-indicators .active { background: #38bdf8 !important; }

/* PerfectPanel-ish common leftovers */
.login-panel, .signup-panel, .account-panel, .orders-panel, .services-panel,
.content-box, .box, .card, .api-box,
.tab-content, .well-sm, .well-lg {
  background: rgba(11,18,32,.86) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
select, textarea, input, option { color-scheme: dark; }
select option { background: #0b1220 !important; color: #e2e8f0 !important; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #050914; }
::-webkit-scrollbar-thumb { background: #26364f; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #38506f; }

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #cbd5e1 !important; }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { color: #f8fafc !important; background: rgba(56,189,248,.08) !important; }
  .navbar-default .navbar-nav > li > a,
  .navbar-inverse .navbar-nav > li > a { height: auto !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  .panel, .well, .jumbotron { border-radius: 14px !important; }
}

/* =========================================================
   FINAL FIXES v3 - navbar logo / new order description only
   ========================================================= */

/* Logo vertical alignment */
.navbar {
  min-height: 50px !important;
}
.navbar-default .navbar-brand,
.navbar-inverse .navbar-brand,
.navbar-brand {
  height: 50px !important;
  line-height: 50px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: block !important;
}
.navbar-default .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a {
  height: 50px !important;
  line-height: 50px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.navbar-default .navbar-toggle,
.navbar-inverse .navbar-toggle {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* Description box on New Order: target likely IDs/classes only, do not touch Services table */
#service_description,
#service_description.form-control,
#neworder_services_description,
#neworder_services_description.form-control,
#order_description,
#order_description.form-control,
#description.form-control,
textarea.form-control,
.form-control[readonly],
.form-control[disabled] {
  background: #080f1c !important;
  background-color: #080f1c !important;
  color: #cfe8ff !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
  opacity: 1 !important;
}
#service_description,
#neworder_services_description,
#order_description,
#description.form-control,
textarea.form-control {
  height: auto !important;
  min-height: 88px !important;
  padding: 14px 14px !important;
}
#service_description *,
#neworder_services_description *,
#order_description *,
#description.form-control * {
  color: #cfe8ff !important;
  background: transparent !important;
}

/* Services page: keep descriptions as normal table text */
.table .service-description,
.table td.service-description,
.table td .service-description {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}

/* New Order description box fix */
#service_description,
.service-description,
.form-group .service-description,
.form-group div[id*="description"],
.form-group div[class*="description"] {
  background: #080f1c !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
  color: #e2e8f0 !important;
  padding: 12px 14px !important;
}

/* 中の変な白枠を消す */
#service_description *,
.service-description * {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #e2e8f0 !important;
}

/* Description全体を他の項目と同じ余白に */
.form-group:has(#service_description),
.form-group:has(.service-description) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Description wrapper fix */
.form-group .service-description {
    margin-top: 8px !important;

    padding: 14px 16px !important;

    background: #080f1c !important;

    border: 1px solid var(--border) !important;

    border-radius: 10px !important;
}

/* ラベル側には枠を付けない */
.form-group label {
    display: block !important;

    margin-bottom: 10px !important;

    background: transparent !important;

    border: 0 !important;

    padding: 0 !important;
}

/* =========================================
   NEW ORDER DESCRIPTION FIX
========================================= */

#service_description {
    background: transparent !important;

    border: 0 !important;

    padding: 0 !important;

    box-shadow: none !important;
}

#service_description label {
    display: block !important;

    margin-bottom: 10px !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
}

#service_description .panel-body {
    background: #080f1c !important;

    border: 1px solid rgba(148,163,184,.16) !important;

    border-radius: 10px !important;

    padding: 16px 18px !important;

    color: #e2e8f0 !important;

    box-shadow: none !important;

    min-height: unset !important;
}

/* bootstrap panel-body汚染除去 */
#service_description .panel-body:before,
#service_description .panel-body:after {
    display: none !important;
    content: none !important;
}

/* =========================================
   SERVICES PAGE DESCRIPTION CELL FIX
   services.twig の td.service-description 専用
========================================= */

#service-table td.service-description,
#service-table tr.service-description td {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  padding: 10px 12px !important;
  color: #dbeafe !important;

  white-space: normal !important;
  line-height: 1.45 !important;
}

/* Description列の中身に余計なカード装飾を付けない */
#service-table td.service-description *,
#service-table tr.service-description td * {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* サービス一覧の行高を自然に戻す */
#service-table tbody > tr > td {
  vertical-align: top !important;
}

/* カテゴリ行は少しだけ強調 */
#service-table tbody > tr > td[colspan="100%"] {
  background: rgba(15, 23, 42, .35) !important;
  color: #f8fafc !important;
  font-weight: 700 !important;
}

/* =========================================
   SERVICES TABLE CLEAN FIX
========================================= */

#service-table {
  table-layout: auto !important;
}

#service-table th,
#service-table td {
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  vertical-align: top !important;
}

/* 横線だけ残す */
#service-table > tbody > tr > td {
  border-top: 1px solid rgba(148,163,184,.12) !important;
}

/* Description列も普通のセルに戻す */
#service-table td.service-description {
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  padding: 12px 10px !important;
  line-height: 1.45 !important;
  color: #dbeafe !important;
}

/* カテゴリ行 */
#service-table tbody > tr > td[colspan="100%"] {
  background: rgba(15,23,42,.30) !important;
  border-top: 1px solid rgba(148,163,184,.12) !important;
  border-bottom: 1px solid rgba(148,163,184,.08) !important;
  color: #f8fafc !important;
  font-weight: 700 !important;
}

/* テーブル全体の角丸だけ維持 */
#service-table thead > tr > th {
  background: rgba(15,23,42,.75) !important;
  border-bottom: 1px solid rgba(148,163,184,.20) !important;
}

/* Description列 */
#service-table td.service-description {
    vertical-align: middle !important;
}

/* View button */
#service-table td.service-description .btn,
#service-table td.service-description button {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    height: 28px !important;

    padding: 0 12px !important;

    line-height: 1 !important;

    vertical-align: middle !important;
}

#service-table td.service-description .btn {
    background: rgba(56,189,248,.10) !important;

    border: 1px solid rgba(56,189,248,.22) !important;

    border-radius: 8px !important;

    color: #dbeafe !important;

    font-size: 12px !important;

    font-weight: 600 !important;
}

/* =========================================
   MODAL FIX
========================================= */

.modal {
    position: fixed !important;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow-y: auto !important;

    z-index: 99999 !important;

    background: rgba(0,0,0,.55);
}

.modal-dialog {
    position: relative !important;

    width: 600px;

    margin: 80px auto !important;

    z-index: 100000 !important;
}

.modal-content {
    background: #0b1220 !important;

    border: 1px solid rgba(148,163,184,.16) !important;

    border-radius: 14px !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.45) !important;

    overflow: hidden;
}

.modal-header {
    padding: 18px 22px !important;

    border-bottom:
        1px solid rgba(148,163,184,.12) !important;
}

.modal-body {
    padding: 20px 22px !important;

    color: #dbeafe !important;

    line-height: 1.55 !important;
}

.modal-title {
    color: #f8fafc !important;

    font-size: 20px !important;

    font-weight: 700 !important;
}

.modal .close {
    color: #fff !important;

    opacity: .7 !important;

    text-shadow: none !important;
}

.modal .close:hover {
    opacity: 1 !important;
}

/* =========================================
   SERVICE DESCRIPTION TOGGLE
========================================= */

.service-description {
  vertical-align: middle !important;
}

.service-desc-toggle {
  height: 28px !important;

  padding: 0 12px !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  border-radius: 8px !important;

  background: rgba(56,189,248,.10) !important;

  border: 1px solid rgba(56,189,248,.22) !important;

  color: #dbeafe !important;

  line-height: 1 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: .15s ease !important;
}

.service-desc-toggle:hover {
  background: rgba(56,189,248,.18) !important;

  border-color: rgba(56,189,248,.42) !important;

  color: #ffffff !important;
}

.service-desc-row td {
  padding: 0 !important;

  border-top: 0 !important;

  background: transparent !important;
}

.service-desc-box {
  margin: 12px 18px 18px;

  background: #080f1c;

  border: 1px solid rgba(148,163,184,.16);

  border-radius: 12px;

  padding: 16px 18px;

  color: #dbeafe;

  line-height: 1.6;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);
}

.service-desc-box {
  font-size: 13px !important;

  font-weight: 400 !important;

  color: #cbd5e1 !important;

  line-height: 1.6 !important;

  letter-spacing: 0 !important;
}

.service-desc-box strong,
.service-desc-box b {
  font-weight: 600 !important;
}

.service-desc-row td {
  padding: 0 !important;

  background: transparent !important;

  border-top: 0 !important;
}

.service-desc-box {
  width: auto !important;

  background: #080f1c;

  border: 1px solid rgba(148,163,184,.12);

  border-radius: 12px;

  padding: 14px 16px;

  color: #cbd5e1;

  font-size: 13px;

  font-weight: 400;

  line-height: 1.6;
}

.service-desc-row td {
  padding: 0 !important;

  border-top: 0 !important;

  background: transparent !important;
}

.service-desc-box {
  width: calc(100% - 32px);

  margin: 12px 16px 16px 16px;

  background: #080f1c;

  border: 1px solid rgba(148,163,184,.12);

  border-radius: 12px;

  padding: 14px 16px;

  color: #cbd5e1;

  font-size: 13px;

  font-weight: 400;

  line-height: 1.6;

  box-sizing: border-box;
}

.service-desc-row td {
  padding: 8px 10px 14px !important;
  background: transparent !important;
  border-top: 0 !important;
}

.service-desc-box {
  width: 100%;
  margin: 0;
  background: #080f1c;
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 10px;
  padding: 12px 14px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  box-sizing: border-box;
}

#service-table td.service-description {
  text-align: left !important;
  vertical-align: middle !important;
}

#service-table td.service-description .service-desc-toggle {
  margin-left: 0 !important;
}

#service-table td.service-description .btn {
  display: inline-block !important;
}

/* テーブル行 */
#service-table tbody tr:hover {
  background: rgba(255,255,255,.02);
}

/* category */
#service-table strong {
  font-size: 14px;
}

/* Viewボタン */
.service-desc-toggle {
  min-width: 52px;
}

.service-desc-mobile-action {
	margin-top: 8px;
}

.service-desc-toggle {
	min-width: 52px !important;
	height: 28px !important;
	padding: 0 12px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.service-desc-row td {
	padding: 0 0 14px 0 !important;
	background: rgba(15,23,42,.18) !important;
	border-top: 0 !important;
}

.service-desc-box {
	margin: 8px 28px 0 28px;
	background: #080f1c;
	border: 1px solid rgba(148,163,184,.12);
	border-radius: 10px;
	padding: 12px 14px;
	color: #cbd5e1;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
}

@media (max-width: 767px) {
	.service-desc-mobile-action {
		display: inline-block !important;
		margin-top: 0 !important;
		margin-left: 8px !important;
		vertical-align: middle !important;
	}

	.service-desc-mobile-action .service-desc-toggle {
		height: 24px !important;
		padding: 0 10px !important;
		font-size: 11px !important;
		min-width: auto !important;
		white-space: nowrap !important;
	}
}

@media (max-width: 767px) {
  .nav.nav-pills {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
  }

  .nav.nav-pills > li,
  .nav.nav-pills > li + li {
    float: none !important;
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav.nav-pills > li.pull-right,
  .nav.nav-pills > li.search {
    float: none !important;
    margin-left: 0 !important;
  }

  .nav.nav-pills > li.search {
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    order: 99 !important;
  }

  .nav.nav-pills > li.search .input-group {
    width: 100% !important;
    display: table !important;
    margin: 0 !important;
  }

  .nav.nav-pills > li.search .form-control {
    width: 100% !important;
  }
}


#service-table tbody > tr > td[colspan="100%"] {
  background: rgba(15, 23, 42, .45) !important;

  border-top: 1px solid rgba(148, 163, 184, .14) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .10) !important;

  padding: 12px 14px !important;

  color: #f8fafc !important;
  font-weight: 700 !important;

  box-shadow: none !important;
}

#service-table tbody > tr > td[colspan="100%"]::before {
  display: none !important;
}

#service-table tbody > tr > td[colspan="100%"] strong {
  font-size: 18px !important;
  font-weight: 800 !important;
}




















@media (max-width: 767px) {
  .navbar-header {
    position: relative;
  }

  .mobile-balance-badge {
    position: absolute;
    right: 58px;
    top: 50%;
    transform: translateY(-50%);

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    height: 32px;
    padding: 0 12px;

    background: rgba(56,189,248,.12);
    border: 1px solid rgba(56,189,248,.25);
    border-radius: 999px;

    color: #dbeafe !important;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  .navbar-toggle {
    margin-right: 12px !important;
  }
}

















@media (max-width: 767px) {

  /* メニュー開いてる時 */
  .navbar-collapse.in ~ .mobile-balance-badge,
  .navbar-collapse.in + .mobile-balance-badge {
    display: none !important;
  }

  /* body側でも保険 */
  .navbar.open .mobile-balance-badge {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 767px) {
  .navbar-right-block {
    margin-top: 18px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(148,163,184,.16) !important;
  }

  .navbar-right-block > li > a {
    color: #cbd5e1 !important;
  }

  .navbar-right-block > li:last-child > a {
    color: #fca5a5 !important;
  }
}

/* select dropdown / option white corner fix */
select,
select.form-control,
select option,
select option:checked,
select option:hover,
select option:focus {
  background: #0b1220 !important;
  color: #e2e8f0 !important;
}

/* data-select系の候補リスト */
.dropdown-menu,
.dropdown-menu li,
.dropdown-menu li a,
.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-menu li,
.bootstrap-select .dropdown-menu li a,
.select2-results,
.select2-results__option {
  background-color: #0b1220 !important;
  color: #e2e8f0 !important;
}

/* 選択中の青/白っぽい角を暗色に */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"] {
  background: rgba(56,189,248,.18) !important;
  color: #f8fafc !important;
  border-radius: 10px !important;
}

/* 白い角が出る場合の保険 */
.dropdown-menu *,
.bootstrap-select *,
.select2-container * {
  box-shadow: none !important;
}

@media (max-width: 767px) {
  body {
    background: #060a11 !important;
  }

  .nav.nav-pills {
    margin-bottom: 18px !important;
  }
}

@media (min-width: 768px) {
  .desktop-shell {
    display: flex;
    min-height: 100vh;
    background: #060a11;
  }

  .desktop-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;

    width: 240px;
    padding: 24px 18px;

    background: #080d16;
    border-right: 1px solid rgba(148,163,184,.14);
  }

  .desktop-sidebar-brand {
    display: block;
    margin-bottom: 28px;

    color: #f8fafc !important;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
  }

  .desktop-sidebar-brand img {
    max-width: 160px;
    max-height: 42px;
  }

  .desktop-sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .desktop-sidebar-menu > li {
    margin-bottom: 6px;
  }

  .desktop-sidebar-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px 14px;
    border-radius: 12px;

    color: #cbd5e1 !important;
    font-weight: 650;
  }

  .desktop-sidebar-menu > li.active > a,
  .desktop-sidebar-menu > li > a:hover {
    background: rgba(56,189,248,.12);
    color: #f8fafc !important;
  }

  .desktop-main {
    width: 100%;
    min-height: 100vh;
    margin-left: 240px;
  }

  .desktop-topbar {
    position: sticky;
    top: 0;
    z-index: 50;

    height: 64px;
    padding: 0 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: rgba(6,10,17,.92);
    border-bottom: 1px solid rgba(148,163,184,.12);
    backdrop-filter: blur(14px);
  }

  .desktop-account-menu {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    gap: 10px;
  }

  .desktop-account-menu > li > a {
    color: #cbd5e1 !important;
    font-weight: 650;
    padding: 8px 10px;
    border-radius: 10px;
  }

  .desktop-account-menu > li > a:hover,
  .desktop-account-menu > li.active > a {
    background: rgba(56,189,248,.10);
    color: #f8fafc !important;
  }

  .desktop-balance .badge {
    background: rgba(56,189,248,.14) !important;
    border: 1px solid rgba(56,189,248,.28);
    color: #dbeafe !important;
    padding: 7px 12px;
    border-radius: 999px;
  }

  .desktop-content {
    padding: 28px;
  }
}



@media (min-width: 768px) {
  .desktop-content {
    padding: 24px 28px !important;
  }

  .desktop-content > .container:first-child {
    margin-top: 0 !important;
  }

  .desktop-content .well:first-child {
    margin-top: 0 !important;
  }
}