/* HUBEX App Skin — based on the Door-to-Door customer booking design */
:root{
  --hubex-blue:#0a84ff;
  --hubex-blue-dark:#0759b7;
  --hubex-green:#22c55e;
  --hubex-ink:#111827;
  --hubex-muted:#64748b;
  --hubex-line:#dbe3ef;
  --hubex-bg:#f2f2f7;
  --hubex-card:#ffffff;
  --hubex-soft-blue:#e8f3ff;
  --hubex-soft-green:#e9f9ef;
  --hubex-shadow:0 18px 48px rgba(15,23,42,.08);
  --hubex-shadow-strong:0 28px 80px rgba(15,23,42,.18);
  --hubex-radius:22px;
}

html{scroll-behavior:smooth}
body,
.dashboard-page,
.cms-quotation-page{
  background:radial-gradient(circle at top left,rgba(10,132,255,.14),transparent 32%),linear-gradient(180deg,#f8fbff,#f2f2f7 44%,#eef3fb)!important;
  color:var(--hubex-ink)!important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.main-area,
.cms-main-area{background:transparent!important}

.top-header,
.cms-top-header{
  height:70px!important;
  background:rgba(248,250,252,.88)!important;
  border-bottom:1px solid rgba(203,213,225,.72)!important;
  box-shadow:0 8px 28px rgba(15,23,42,.045)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.sidebar,
.cms-sidebar{
  background:rgba(248,250,252,.92)!important;
  border-right:1px solid rgba(203,213,225,.78)!important;
  box-shadow:14px 0 34px rgba(15,23,42,.08)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.sidebar-brand,
.cms-sidebar-brand{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.72))!important;
  border-bottom:1px solid rgba(203,213,225,.72)!important;
  color:var(--hubex-ink)!important;
}

.sidebar-brand img,
.cms-sidebar-brand img,
.header-title img,
.cms-header-title img{
  border-radius:13px!important;
  box-shadow:0 10px 24px rgba(10,132,255,.24)!important;
}

.nav-link,
.cms-nav-link{
  border-radius:14px!important;
  color:#475569!important;
  transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease!important;
}
.nav-link:hover,
.cms-nav-link:hover{
  background:#eef6ff!important;
  color:#0a66d6!important;
  transform:translateX(2px);
}
.nav-link.active,
.cms-nav-link.active{
  background:linear-gradient(135deg,var(--hubex-blue),var(--hubex-green))!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(10,132,255,.26)!important;
}
.nav-icon,
.cms-nav-icon{
  background:linear-gradient(135deg,var(--hubex-soft-blue),var(--hubex-soft-green))!important;
  color:#0a66d6!important;
  border-radius:11px!important;
}
.nav-link.active .nav-icon,
.cms-nav-link.active .cms-nav-icon{
  background:rgba(255,255,255,.20)!important;
  color:#fff!important;
}

.dashboard-main,
.cms-module-main,
.customer-main,
.user-main,
.module-main,
.settings-main,
.door-shell,
.partner-shell{
  max-width:1420px!important;
  padding:22px!important;
}

.page-heading,
.cms-module-heading,
.module-heading,
.customer-heading,
.user-heading,
.door-header,
.partner-header,
.settings-heading{
  margin-bottom:18px!important;
}
.eyebrow,
.cms-module-heading p,
.module-heading p,
.door-header p,
.partner-header p{
  color:var(--hubex-blue)!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}
.page-heading h2,
.cms-module-heading h2,
.module-heading h2,
.customer-heading h2,
.user-heading h2,
.door-header h1,
.partner-header h1{
  font-size:28px!important;
  letter-spacing:-.02em!important;
  color:var(--hubex-ink)!important;
}

.stat-card,
.panel,
.customer-card,
.user-card,
.module-card,
.settings-card,
.door-panel,
.partner-panel,
.summary-grid article,
.card,
.app-container,
.quick-customer-card{
  background:rgba(255,255,255,.86)!important;
  border:1px solid rgba(203,213,225,.82)!important;
  border-radius:var(--hubex-radius)!important;
  box-shadow:var(--hubex-shadow)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.stat-card:hover,
.panel:hover,
.customer-card:hover,
.user-card:hover,
.module-card:hover,
.settings-card:hover,
.door-panel:hover,
.partner-panel:hover,
.summary-grid article:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 56px rgba(15,23,42,.10)!important;
}

.panel-header,
.card-title,
.list-toolbar,
.module-toolbar,
.record-head,
.dialog-head,
.settings-card .card-title,
.app-header,
.cms-module-heading,
.partner-panel .panel-toolbar,
.door-panel .panel-title{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.76))!important;
  border-bottom:1px solid rgba(218,226,238,.9)!important;
}

.primary-button,
.primary-action,
.profile-primary,
.btn-primary,
.mini-btn.green,
.route-calculate,
button[type="submit"]{
  background:linear-gradient(135deg,var(--hubex-blue),#168fff)!important;
  color:#fff!important;
  border:0!important;
  border-radius:14px!important;
  box-shadow:0 10px 24px rgba(10,132,255,.22)!important;
  font-weight:850!important;
}
.primary-button:hover,
.primary-action:hover,
.profile-primary:hover,
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(10,132,255,.28)!important;
}

.secondary-action,
.secondary-button,
.profile-secondary,
.back-link,
.date-chip,
.cms-module-chip,
.mini-btn,
.header-icon,
.cms-header-icon,
.notification-button,
.cms-notification-button,
.profile-button,
.cms-profile-button{
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(203,213,225,.82)!important;
  color:#0a66d6!important;
  border-radius:14px!important;
  box-shadow:0 6px 18px rgba(15,23,42,.045)!important;
  font-weight:800!important;
}

.profile-dropdown,
.cms-profile-dropdown{
  top:calc(100% + 10px)!important;
  min-width:220px!important;
  padding:8px!important;
  border:1px solid rgba(203,213,225,.82)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 22px 60px rgba(15,23,42,.18)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.profile-dropdown button,
.cms-profile-dropdown button{
  min-height:40px!important;
  border-radius:12px!important;
  color:#334155!important;
  font-weight:800!important;
}
.profile-dropdown button:hover,
.cms-profile-dropdown button:hover{
  background:#eef6ff!important;
  color:#0a66d6!important;
}

.approval-panel{grid-column:1/-1}
.approval-list{display:grid;gap:10px}
.approval-item{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  border:1px solid rgba(203,213,225,.82)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
  box-shadow:0 8px 24px rgba(15,23,42,.045);
}
.approval-item strong{font-size:14px}
.approval-item span{display:block;margin-top:3px;color:#64748b}
.approval-item small{display:block;margin-top:3px;color:#0a66d6;font-weight:850}
.approval-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.approval-actions .mini-btn{min-height:36px!important;border:0!important;border-radius:12px!important;font-weight:850!important}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea{
  border:1px solid rgba(203,213,225,.86)!important;
  border-radius:13px!important;
  background:#fff!important;
  color:var(--hubex-ink)!important;
  box-shadow:0 3px 12px rgba(15,23,42,.025)!important;
  transition:border-color .16s ease,box-shadow .16s ease!important;
}
input:focus,
select:focus,
textarea:focus{
  border-color:#60a5fa!important;
  box-shadow:0 0 0 4px rgba(10,132,255,.12),0 4px 16px rgba(15,23,42,.04)!important;
  outline:0!important;
}

.form-group label,
.form-grid label,
.record-form label,
.settings-grid label,
.estimate-grid label{
  color:#475569!important;
  font-weight:760!important;
}

.badge,
.tag,
.status-pill,
.role-pill,
.status-badge{
  border-radius:999px!important;
  font-weight:850!important;
}
.badge.good,
.status-pill.active,
.status-pill.paid,
.status-pill.delivered{
  background:#dcfce7!important;
  color:#087a45!important;
}
.badge.off,
.status-pill.inactive,
.status-pill.cancelled{
  background:#fee2e2!important;
  color:#991b1b!important;
}

.table-wrap,
.list-card,
.partner-panel,
.module-card{
  overflow:hidden!important;
}
.table-wrap table,
table{
  border-collapse:separate!important;
  border-spacing:0!important;
}
th{
  background:#f8fbff!important;
  color:#64748b!important;
  font-weight:850!important;
}
td{
  border-bottom:1px solid #eef2f7!important;
}

.customer-modal-backdrop,
.user-modal-backdrop,
.quick-customer-backdrop,
.partner-modal,
.record-modal,
.estimate-pop{
  background:rgba(15,23,42,.46)!important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.customer-modal-dialog,
.user-modal-dialog,
.quick-customer-dialog,
.partner-dialog,
.record-dialog,
.estimate-card,
.profile-modal{
  border:1px solid rgba(255,255,255,.80)!important;
  border-radius:26px!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:var(--hubex-shadow-strong)!important;
}

.edit-btn,
.row-actions button:not(.delete-btn),
.mini-btn:not(.danger){
  background:var(--hubex-soft-blue)!important;
  color:#0a66d6!important;
  border-radius:10px!important;
}
.delete-btn,
.mini-btn.danger,
.modal-close,
.icon-close,
.quick-customer-close{
  background:#fee2e2!important;
  color:#991b1b!important;
  border-radius:10px!important;
}

@media(max-width:820px){
  body{background:#f2f2f7!important}
  .dashboard-main,
  .cms-module-main,
  .customer-main,
  .user-main,
  .module-main,
  .settings-main,
  .door-shell,
  .partner-shell{padding:14px!important}
  .top-header,
  .cms-top-header{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    height:64px!important;
  }
  .page-heading h2,
  .cms-module-heading h2,
  .module-heading h2,
  .customer-heading h2,
  .user-heading h2,
  .door-header h1,
  .partner-header h1{font-size:23px!important}
  .stat-grid,
  .customer-stats,
  .user-stats,
  .summary-grid,
  .dashboard-grid,
  .door-layout,
  .customer-layout{
    grid-template-columns:1fr!important;
  }
  .primary-action,
  .secondary-action,
  .primary-button,
  .secondary-button{min-height:46px!important}
  .partner-dialog,
  .record-dialog,
  .customer-modal-dialog,
  .user-modal-dialog{border-radius:22px!important}

  .sidebar,
  .cms-sidebar{
    background:rgba(248,250,252,.98)!important;
    box-shadow:24px 0 60px rgba(15,23,42,.18)!important;
  }
  .sidebar.open,
  .cms-sidebar.open{border-radius:0 26px 26px 0!important}

  .dashboard-page .profile-dropdown,
  .cms-profile-dropdown{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    top:calc(100dvh - 245px)!important;
    bottom:auto!important;
    width:auto!important;
    min-width:0!important;
    padding:12px!important;
    border-radius:24px!important;
    box-shadow:0 26px 70px rgba(15,23,42,.28)!important;
  }
  .dashboard-page .profile-dropdown:before,
  .cms-profile-dropdown:before{
    content:"";
    display:block;
    width:38px;
    height:4px;
    margin:0 auto 10px;
    border-radius:999px;
    background:#cbd5e1;
  }
  .dashboard-page .profile-dropdown button,
  .cms-profile-dropdown button{
    min-height:48px!important;
    text-align:center!important;
    font-size:14px!important;
  }
}