:root {
  --bg: #070b1a;
  --bg-soft: #0f1730;
  --panel: rgba(19, 29, 56, 0.76);
  --panel-border: rgba(130, 162, 255, 0.24);
  --text: #eef4ff;
  --text-soft: #b8c7ea;
  --c1: #4cc9f0;
  --c2: #3a86ff;
  --c3: #b517ff;
}

@font-face {
  font-family: 'Motter Tektura';
  src: url('../fonts/Motter-Tektura.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body.bg-dark-ui {
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at -10% 95%, rgba(181, 23, 255, .25), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(58, 134, 255, .28), transparent 60%),
    linear-gradient(180deg, #080e1f 0%, #080b18 55%, #070912 100%);
}
.navbar { background: rgba(8, 13, 28, 0.82); backdrop-filter: blur(8px); position: relative; z-index: 2500; }
.brand-wrap {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
.brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.svg-brand {
  width: 220px;
  height: auto;
}
.svg-brand text {
  font-family: 'Motter Tektura', 'Segoe UI', sans-serif;
  font-size: 70px;
}
.svg-brand text:first-of-type {
  fill: rgba(255,255,255,.92);
}
.svg-brand text:nth-of-type(2) {
  fill: none;
  stroke: url(#brandGradient);
  stroke-width: 2px;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawText 3s ease forwards;
  filter: drop-shadow(0 0 5px rgba(255, 0, 200, 0.8));
}
@keyframes drawText {
  to { stroke-dashoffset: 0; }
}
.navbar .nav-link { color: #dbe8ff; }
.navbar .nav-link:hover { color: #fff; }
.navbar-toggler { border-color: rgba(130, 162, 255, 0.35); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(76, 201, 240, .2); }
.dropdown-ui {
  border: 1px solid var(--panel-border);
  background: rgba(10, 16, 35, 0.96);
  border-radius: 12px;
  z-index: 3000;
}
.dropdown-ui .dropdown-item { color: var(--text); }
.dropdown-ui .dropdown-item:hover { background: rgba(76, 201, 240, .12); color: #fff; }
.role-pill { border: 1px solid var(--panel-border); border-radius: 999px; padding: .2rem .65rem; font-size: .72rem; color: var(--text-soft); }

.public-shell { max-width: 1180px; margin: 0 auto; }
.public-hero {
  border: 1px solid var(--panel-border);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(12, 24, 60, .92), rgba(18, 16, 49, .88));
  padding: 2rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255,255,255,.02);
}
.chip {
  display: inline-block;
  border: 1px solid rgba(76, 201, 240, .45);
  border-radius: 999px;
  color: #bfefff;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem .8rem;
  background: rgba(76,201,240,.08);
}
.text-gradient {
  background: linear-gradient(90deg, var(--c3), var(--c2), var(--c1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-secondary-light { color: var(--text-soft); }

.card-ui {
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 14px 32px rgba(0,0,0,.25);
  color: var(--text);
}
.card-ui h1, .card-ui h2, .card-ui h3, .card-ui h4, .card-ui h5, .card-ui h6 { color: var(--text); }
.card-ui p, .card-ui label, .card-ui li, .card-ui small, .card-ui span, .card-ui div { color: inherit; }

.admin-area .text-secondary,
.admin-area .form-text { color: var(--text-soft) !important; }

.btn-glow {
  border: 0;
  color: #fff;
  background: linear-gradient(90deg, #c21cff 0%, #3a86ff 55%, #4cc9f0 100%);
  box-shadow: 0 10px 30px rgba(58, 134, 255, .35);
}
.btn-glow:hover { color: #fff; filter: brightness(1.06); }

.form-control, .form-select {
  background: rgba(8, 13, 28, .7);
  color: var(--text);
  border: 1px solid rgba(121, 148, 219, .35);
}
.form-control::placeholder { color: #9db2e1; opacity: .9; }
.form-check-label { color: var(--text); }
.form-control:focus, .form-select:focus {
  border-color: var(--c1);
  background: rgba(8, 13, 28, .85);
  box-shadow: 0 0 0 .2rem rgba(76, 201, 240, .2);
  color: var(--text);
}

.alert {
  border: 1px solid transparent;
  color: #eef4ff;
}
.alert-danger {
  background: rgba(220, 53, 69, .18);
  border-color: rgba(220, 53, 69, .45);
  color: #ffd9df;
}
.alert-warning {
  background: rgba(255, 193, 7, .2);
  border-color: rgba(255, 193, 7, .5);
  color: #fff0bf;
}
.alert-success {
  background: rgba(25, 135, 84, .2);
  border-color: rgba(25, 135, 84, .45);
  color: #d7ffe9;
}
.alert-dark {
  background: rgba(10, 18, 40, .92) !important;
  border-color: rgba(121, 148, 219, .38) !important;
  color: #eaf1ff !important;
}
.alert-dark strong {
  color: #ffffff !important;
}
.alert-dark .text-secondary-light {
  color: #b8c7ea !important;
}

.table-ui { --bs-table-bg: transparent; --bs-table-color: var(--text); }
.table-ui thead th { color: #b9caf0; border-bottom-color: rgba(121, 148, 219, .35); }
.table-ui td { border-color: rgba(121, 148, 219, .2); }
.table-ui th, .table-ui td { color: var(--text); }
.badge-new { background: rgba(181, 23, 255, .2); color: #f0ccff; border: 1px solid rgba(181, 23, 255, .55); }

.site-footer {
  background: rgba(8, 13, 28, 0.82);
}
.site-footer-rich {
  background:
    linear-gradient(180deg, rgba(10, 17, 36, .92), rgba(7, 12, 27, .95));
}
.site-footer-rich h5 {
  color: #eaf1ff;
  font-size: .95rem;
  letter-spacing: .04em;
  margin-bottom: .75rem;
}
.site-footer-rich .footer-list li {
  color: var(--text-soft);
  margin-bottom: .45rem;
}
.footer-store-search,
.footer-store-select {
  background: rgba(8, 13, 28, .82);
  border: 1px solid rgba(121, 148, 219, .35);
  color: var(--text);
}
.footer-store-search::placeholder {
  color: #9db2e1;
}
.footer-link {
  color: var(--text-soft);
  text-decoration: none;
}
.footer-link:hover { color: #fff; }
.site-footer-bottom {
  background: rgba(4, 8, 20, .82);
  border-top: 1px solid rgba(121, 148, 219, .25);
}
.site-footer-bottom .footer-links a {
  color: #9fd8ff;
  text-decoration: none;
}
.site-footer-bottom .footer-links a:hover {
  color: #ffffff;
}

.stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: .75rem;
}
.step {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: .55rem .65rem;
  font-size: .85rem;
  color: var(--text-soft);
  text-align: center;
}
.step.is-active {
  color: #fff;
  border-color: rgba(76,201,240,.7);
  background: rgba(76,201,240,.12);
}
.wizard-step { display: none; }
.wizard-step.is-active { display: block; }
.wizard-actions { position: relative; z-index: 5; }
.quill-host { min-height: 190px; background: rgba(8, 13, 28, .72); border-radius: 10px; margin-bottom: 1rem; }
.ql-container.ql-snow { min-height: 140px; max-height: 260px; overflow-y: auto; }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: rgba(121, 148, 219, .35) !important; }

.repair-track .track-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .55rem;
}
.repair-track .track-step {
  border: 1px solid rgba(121, 148, 219, .28);
  border-radius: 12px;
  padding: .8rem .65rem;
  text-align: center;
  background: rgba(4, 8, 20, .55);
}
.repair-track .track-step-title {
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.2;
}
.repair-track .track-step-sub {
  font-size: .82rem;
  color: var(--text-soft);
}
.repair-track .track-step.is-current {
  border-color: #2ea4ff;
  box-shadow: 0 0 0 1px rgba(46,164,255,.35), inset 0 0 0 1px rgba(46,164,255,.2);
}
.repair-track .track-step.is-done {
  border-color: rgba(76, 201, 240, .45);
}
.repair-track .w-40 { width: 40%; }

.pricing-ux .pricing-card {
  display: block;
  text-decoration: none;
  color: var(--text);
  border: 1px solid rgba(121, 148, 219, .3);
  border-radius: 14px;
  background: rgba(7, 13, 30, .65);
  padding: .9rem;
  height: 100%;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pricing-ux .pricing-card:hover {
  transform: translateY(-2px);
  border-color: rgba(76, 201, 240, .65);
  box-shadow: 0 10px 25px rgba(0,0,0,.3);
}
.pricing-ux .pricing-logo-wrap,
.pricing-ux .pricing-device-wrap {
  height: 96px;
  border-radius: 10px;
  background: rgba(12, 20, 44, .8);
  border: 1px solid rgba(121, 148, 219, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .65rem;
}
.pricing-ux .pricing-logo,
.pricing-ux .pricing-device {
  max-height: 78px;
  max-width: 100%;
  object-fit: contain;
}
.pricing-ux .pricing-fallback {
  font-size: 1.4rem;
  font-weight: 700;
  color: #b9caf0;
}
.pricing-ux .pricing-card-title {
  font-weight: 600;
  font-size: .95rem;
}
.pricing-ux .pricing-services {
  display: grid;
  gap: .65rem;
}
.pricing-ux .pricing-service-item {
  border: 1px solid rgba(121, 148, 219, .25);
  border-radius: 12px;
  padding: .8rem .9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: rgba(6, 10, 24, .5);
}
.pricing-ux .pricing-price {
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

#repairsKanbanLib,
#repairsKanbanLib .kanban-container {
  width: 100%;
}
#repairsKanbanLib {
  height: calc(100vh - 250px);
  min-height: 520px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: .2rem;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#repairsKanbanLib:active { cursor: grabbing; }
#repairsKanbanLib::-webkit-scrollbar { width: 0; height: 0; }
#repairsKanbanLib .kanban-container {
  align-items: stretch;
  display: flex !important;
  flex-wrap: nowrap;
  gap: 12px;
  min-height: 100%;
  height: 100% !important;
  padding: 0 .2rem;
}
#repairsKanbanLib .kanban-board {
  width: 290px !important;
  min-width: 290px;
  max-width: 290px;
  float: none !important;
  margin: 0 !important;
  border: 1px solid rgba(121, 148, 219, .25);
  border-radius: 12px;
  background: rgba(8, 14, 31, .55);
  display: flex;
  flex-direction: column;
  height: 100% !important;
  min-height: 100%;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
#repairsKanbanLib .kanban-title-board {
  color: var(--text);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
}
#repairsKanbanLib .kanban-drag {
  padding: .45rem;
  max-height: none;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
#repairsKanbanLib .kanban-item {
  border: 1px solid rgba(121, 148, 219, .25);
  border-radius: 9px;
  background: rgba(8, 14, 31, .82);
  margin-bottom: .4rem;
  padding: .45rem .5rem;
}
#repairsKanbanLib .kanban-item.is-dragging {
  transform: rotate(1deg);
  opacity: .8;
}
.kanban-repair-card {
  color: var(--text);
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.kanban-repair-card:hover {
  color: #fff;
}
.kanban-repair-card .kr-top {
  display: flex;
  justify-content: space-between;
  gap: .45rem;
  margin-bottom: .2rem;
}
.kanban-repair-card .kr-top strong {
  font-size: .82rem;
}
.kanban-repair-card .kr-top small {
  color: var(--text-soft);
  font-size: .72rem;
}
.kanban-repair-card .kr-client {
  font-size: .84rem;
  font-weight: 600;
}
.kanban-repair-card .kr-device,
.kanban-repair-card .kr-store {
  font-size: .74rem;
  color: var(--text-soft);
}
.kanban-repair-card .kr-phone {
  margin-top: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(76, 201, 240, .5);
  background: rgba(76, 201, 240, .12);
  color: #c8f2ff;
  text-decoration: none;
  font-size: .72rem;
  line-height: 1;
}
.kanban-repair-card .kr-phone:hover {
  color: #fff;
  border-color: rgba(76, 201, 240, .8);
  background: rgba(76, 201, 240, .2);
}

.repair-photo-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(121, 148, 219, .35);
  transition: transform .15s ease, border-color .15s ease;
}
.repair-photo-thumb:hover {
  transform: translateY(-1px);
  border-color: rgba(76, 201, 240, .7);
}
.repair-qr-img {
  width: 160px;
  height: 160px;
  border-radius: 10px;
  border: 1px solid rgba(121, 148, 219, .35);
  background: #fff;
  padding: 6px;
}
.repair-gallery-modal .modal-content {
  background: linear-gradient(150deg, rgba(12, 20, 44, .98), rgba(11, 15, 33, .98));
  border: 1px solid rgba(121, 148, 219, .35);
  color: var(--text);
}
.repair-gallery-modal .modal-header,
.repair-gallery-modal .modal-footer {
  border-color: rgba(121, 148, 219, .25);
}
.repair-gallery-modal #repairGalleryImage {
  max-width: 100%;
  max-height: 72vh;
  border-radius: 10px;
  border: 1px solid rgba(121, 148, 219, .25);
}

.dashboard-shell .dashboard-hero {
  background: linear-gradient(140deg, rgba(18, 30, 64, .95), rgba(20, 18, 55, .9));
}
.dashboard-kpi small {
  display: block;
  color: var(--text-soft);
  margin-bottom: .4rem;
}
.dashboard-kpi strong {
  font-size: 1.7rem;
  line-height: 1;
}
.dashboard-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.dashboard-status-item {
  border: 1px solid rgba(121, 148, 219, .25);
  border-radius: 12px;
  padding: .75rem .8rem;
  background: rgba(6, 10, 24, .48);
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: center;
}
.dashboard-status-item span {
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.2;
}
.dashboard-status-item strong {
  font-size: 1.15rem;
}
.dashboard-quick-list {
  display: grid;
  gap: .6rem;
}
.dashboard-quick-list > div,
.dashboard-topstores > div {
  border: 1px solid rgba(121, 148, 219, .25);
  border-radius: 10px;
  padding: .6rem .75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(6, 10, 24, .48);
}
.dashboard-quick-list span,
.dashboard-topstores span {
  color: var(--text-soft);
}
.dashboard-quick-list strong,
.dashboard-topstores strong {
  font-size: 1.05rem;
}

@media (max-width: 768px) {
  .public-hero { padding: 1.4rem; }
  .navbar .btn { width: 100%; }
  .role-pill { display: inline-block; margin-top: .25rem; }
  .brand-logo { width: 28px; height: 28px; }
  .svg-brand { width: 150px; }
  .svg-brand text { font-size: 62px; }
  .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .repair-track .track-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-ux .pricing-service-item { align-items: flex-start; flex-direction: column; }
  .dashboard-status-grid { grid-template-columns: 1fr; }
  #repairsKanbanLib {
    height: calc(100vh - 210px);
    min-height: 420px;
  }
  #repairsKanbanLib .kanban-board {
    width: 250px !important;
    min-width: 250px;
    max-width: 250px;
  }
}

.repair-qr-card {
  min-height: 220px;
}
.repair-notes-row {
  position: relative;
  z-index: 1;
}
#notesForm {
  margin-top: .25rem;
}

/* Remote request layout fixes */
.remote-request-form .card-ui { overflow: hidden; }
.remote-request-form .h-captcha { max-width: 100%; }
.remote-request-form .h-captcha iframe { max-width: 100% !important; }
.remote-request-actions { align-items: center; flex-wrap: wrap; }
@media (max-width: 576px) {
  .remote-request-actions .btn { width: 100%; }
  .remote-request-form .h-captcha { transform-origin: left top; }
}


/* ArmadaDev root-like public header */
.top-bar{background:rgba(8,12,27,.9);border-bottom:1px solid rgba(255,255,255,.08);}
.top-bar .social-icons a{opacity:.85}
.top-bar .social-icons a:hover{opacity:1}
.ad-site-header{position:sticky;top:0;z-index:1040;padding:.5rem 0;background:transparent;backdrop-filter:none;}
.ad-header-capsule{border-radius:16px;background:linear-gradient(140deg,rgba(18,28,58,.82),rgba(24,20,54,.82));border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 35px rgba(0,0,0,.35);}
.ad-header-capsule .navbar-light .nav-link{color:#e9eeff!important;font-weight:600}
.ad-header-capsule .navbar-light .nav-link:hover,.ad-header-capsule .navbar-light .nav-link:focus{color:#fff!important}
.ad-header-capsule .navbar-light .navbar-toggler{border-color:rgba(255,255,255,.35)}
.ad-header-capsule .navbar-light .navbar-toggler-icon{filter:invert(1) brightness(1.2)}
.ad-header-capsule .dropdown-menu{z-index:1200}
@media (max-width:991px){.ad-site-header{top:0;padding:.35rem 0}.ad-header-capsule{border-radius:12px}.top-bar{display:none}}



/* Fix: remove dark square inside header capsule */
.ad-header-capsule .navbar{background:transparent !important;backdrop-filter:none !important;box-shadow:none !important;}


/* Compact top bar */
.top-bar-compact{min-height:34px;gap:.5rem;}
.top-bar .contact-info{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top-store-select{padding-top:.15rem;padding-bottom:.15rem;font-size:.8rem;}
@media (max-width:1199px){.top-bar .contact-info{font-size:.75rem}.top-store-select{max-width:180px}}


/* Admin header compact typography */
.admin-area .ad-header-capsule .navbar-nav .nav-link{font-size:.92rem;padding:.35rem .5rem;}
.admin-area .ad-header-capsule .dropdown-toggle{font-size:.9rem;}
.admin-area .ad-header-capsule .role-pill{font-size:.66rem;padding:.14rem .5rem;}
.admin-area .ad-header-capsule .btn.btn-sm{font-size:.78rem;padding:.3rem .55rem;}
@media (max-width:1200px){
  .admin-area .ad-header-capsule .navbar-nav .nav-link{font-size:.84rem;padding:.3rem .38rem;}
  .admin-area .ad-header-capsule .dropdown-toggle{font-size:.82rem;}
}
@media (max-width:992px){
  .admin-area .ad-header-capsule .navbar-nav .nav-link{font-size:.95rem;padding:.45rem .2rem;}
}