/*
  OrbiCraft Admin UI sizing system.
  Visual rules only: loaded by the admin screens; PHP, queries, forms,
  permissions and navigation behavior remain in their original pages.
*/

/* Shared left navigation */
.admin-page,
.admin-shell{
  grid-template-columns:264px minmax(0,1fr) !important;
}
.admin-main{
  grid-column:2 !important;
  min-width:0 !important;
  width:100% !important;
}
.admin-sidebar{
  width:264px !important;
  min-width:264px !important;
  max-width:264px !important;
  padding:22px 15px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
.sidebar-inner{
  min-height:100% !important;
  height:auto !important;
  overflow:visible !important;
}
.admin-brand{
  gap:12px !important;
  margin:0 0 16px !important;
  padding:2px 10px 14px !important;
}
.admin-brand img{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  max-width:46px !important;
  max-height:46px !important;
  padding:4px !important;
  border-radius:13px !important;
}
.admin-brand strong{font-size:17px !important;letter-spacing:-.35px !important}
.admin-brand > div > span{font-size:10px !important;margin-top:3px !important}
.admin-user-card{
  margin:0 3px 18px !important;
  padding:13px !important;
  border-radius:14px !important;
}
.admin-user-card small{font-size:9px !important;letter-spacing:.1em !important;margin-bottom:6px !important}
.admin-user-card strong{font-size:11px !important;margin-bottom:4px !important}
.admin-user-card span{font-size:9px !important;line-height:1.45 !important}
.sidebar-title{margin:20px 11px 9px !important;font-size:9px !important;letter-spacing:.14em !important}
.side-nav{gap:5px !important}
.side-nav a{
  min-height:42px !important;
  height:auto !important;
  gap:11px !important;
  padding:8px 11px !important;
  border-radius:10px !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
}
.side-nav i{width:17px !important;min-width:17px !important;font-size:15px !important}

/* Header and main content proportions */
.admin-main > header.premium-admin-header{
  min-height:126px !important;
  height:auto !important;
  max-height:none !important;
  padding:19px clamp(22px,2.6vw,42px) !important;
}
.premium-admin-header .admin-topbar-inner{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  justify-content:stretch !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  gap:22px !important;
  margin:0 !important;
  padding:0 !important;
}
.premium-admin-header .admin-header-title{
  display:flex !important;
  min-width:0 !important;
  max-width:none !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}
.premium-admin-header .admin-header-kicker{
  min-height:0 !important;
  align-self:flex-start !important;
  gap:7px !important;
  margin:0 0 8px !important;
  padding:6px 10px !important;
  font-size:9px !important;
  line-height:1 !important;
  letter-spacing:.09em !important;
}
.premium-admin-header h1,
.admin-main > header.admin-topbar:not(.premium-admin-header) h1,
.admin-main > header.topbar h1{
  width:100% !important;
  margin:0 0 5px !important;
  font-size:clamp(25px,2.1vw,30px) !important;
  font-weight:850 !important;
  line-height:1.04 !important;
  letter-spacing:-.045em !important;
  text-align:left !important;
}
.premium-admin-header .admin-header-title p,
.admin-main > header.admin-topbar p,
.admin-main > header.topbar p{
  max-width:58ch !important;
  margin:0 !important;
  font-size:11.8px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  text-align:left !important;
}
.premium-admin-header .premium-header-actions,
.admin-main > header .top-actions,
.admin-main > header .topbar-actions{
  display:flex !important;
  align-self:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.premium-admin-header .top-action,
.admin-main > header .top-action,
.admin-main > header .topbar-actions .btn{
  min-width:0 !important;
  min-height:40px !important;
  height:40px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  font-size:10px !important;
  font-weight:850 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.admin-main > header.topbar,
.admin-main > header.admin-topbar:not(.premium-admin-header){
  min-height:126px !important;
  padding:20px clamp(18px,2.3vw,36px) !important;
}
.content-wrap,
.admin-main > .content{
  width:100% !important;
  max-width:1720px !important;
  margin:0 auto !important;
  padding:22px clamp(18px,2.3vw,36px) 42px !important;
}

/* Hero, operations summary, shortcuts and metrics */
.command-hero{
  width:100% !important;
  margin:0 0 15px !important;
  padding:22px 25px !important;
  border-radius:20px !important;
}
.command-grid{gap:20px !important}
.badge-soft{
  gap:7px !important;
  margin:0 0 10px !important;
  padding:6px 10px !important;
  font-size:9px !important;
  line-height:1.2 !important;
}
.command-hero h2{
  max-width:32ch !important;
  margin:0 0 7px !important;
  font-size:clamp(21px,1.9vw,27px) !important;
  line-height:1.15 !important;
  letter-spacing:-.8px !important;
}
.command-hero p{max-width:730px !important;margin:0 0 12px !important;font-size:11px !important;line-height:1.65 !important}
.hero-pills{gap:7px !important}
.hero-pills span{gap:6px !important;padding:7px 10px !important;font-size:9px !important}
.ops-card{padding:15px !important;border-radius:15px !important}
.ops-heading{gap:10px !important;margin-bottom:9px !important}
.ops-heading h3{font-size:14px !important}
.live-badge{gap:5px !important;padding:6px 9px !important;font-size:9px !important}
.ops-row{gap:10px !important;padding:8px 0 !important}
.ops-row strong,.ops-row span{font-size:10px !important}
.quick-launch{
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr)) !important;
  gap:9px !important;
  margin:0 0 15px !important;
}
.launch-card{
  min-width:0 !important;
  min-height:48px !important;
  gap:8px !important;
  padding:8px 10px !important;
  border-radius:14px !important;
  font-size:10px !important;
}
.launch-card i{
  flex:0 0 31px !important;
  width:31px !important;
  height:31px !important;
  border-radius:10px !important;
  font-size:15px !important;
}
.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:12px !important;margin-bottom:15px !important}
.metric-card{min-height:92px !important;padding:14px 15px !important;border-radius:15px !important}
.metric-icon{width:36px !important;height:36px !important;margin:0 0 9px !important;border-radius:11px !important;font-size:16px !important}
.metric-card strong{margin-bottom:4px !important;font-size:20px !important;letter-spacing:-.5px !important}
.metric-card span{font-size:9px !important;line-height:1.4 !important}

/* Uniform cards, headings, charts and tables */
.panel-grid,.report-chart-grid{gap:15px !important;margin-bottom:15px !important}
.panel-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.report-chart-grid{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr) !important}
.panel,.report-chart-card,.card{
  min-width:0 !important;
  padding:18px !important;
  border-radius:17px !important;
}
.panel-header{gap:12px !important;margin-bottom:12px !important}
.panel-header h2,.report-chart-card h2{margin:0 0 4px !important;font-size:14px !important;line-height:1.3 !important;letter-spacing:-.2px !important}
.panel-header p,.report-chart-card p{font-size:10px !important;line-height:1.55 !important}
.report-chart-card p{margin-bottom:12px !important}
.panel-tag{gap:5px !important;padding:6px 9px !important;font-size:9px !important}
.list-stack{gap:8px !important}
.list-item{gap:9px !important;padding:10px !important;border-radius:13px !important}
.list-icon{width:34px !important;height:34px !important;min-width:34px !important;border-radius:10px !important;font-size:15px !important}
.list-content h4{margin-bottom:3px !important;font-size:11px !important}
.list-content p{font-size:10px !important;line-height:1.5 !important}
.table-wrap{width:100% !important;overflow-x:auto !important;border-radius:12px !important}
.admin-main table,.card table{width:100% !important}
.admin-main table th,.card table th{padding:10px 11px !important;font-size:9px !important;letter-spacing:.08em !important}
.admin-main table td,.card table td{padding:10px 11px !important;font-size:10px !important;line-height:1.45 !important}
.report-table-panel th{padding:10px 11px !important;font-size:9px !important;letter-spacing:.08em !important}
.report-table-panel td{padding:10px 11px !important;font-size:10px !important;line-height:1.45 !important}
.report-table-panel small{font-size:9px !important}
.label,.status-dot,.pill{padding:5px 8px !important;font-size:9px !important}
.mini-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:10px !important}
.mini-card{padding:14px !important;border-radius:15px !important}
.mini-card i{width:36px !important;height:36px !important;margin-bottom:9px !important;border-radius:11px !important;font-size:16px !important}
.mini-card strong{margin-bottom:4px !important;font-size:11px !important}
.mini-card span{font-size:10px !important;line-height:1.5 !important}
.report-chart-card .chart-wrap{min-height:250px !important}
.report-chart-card.small-chart .chart-wrap{min-height:220px !important}

/* Inputs and actions stay comfortable while matching the compact scale */
.admin-main .form-control,
.admin-main input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.admin-main select,
.admin-main textarea,
.card input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.card select,
.card textarea{
  min-height:36px !important;
  padding:8px 10px !important;
  border-radius:9px !important;
  font-size:10px !important;
  line-height:1.4 !important;
}
.admin-main textarea,.card textarea{min-height:86px !important}
.admin-main .btn,.admin-main button:not(.mobile-menu-btn),.admin-form button,
.card .btn,.card button{
  min-height:36px !important;
  padding:8px 12px !important;
  border-radius:9px !important;
  font-size:10px !important;
  line-height:1.2 !important;
}
.admin-form{gap:9px !important}
.admin-form input,.admin-form select,.admin-form textarea{padding:10px 12px !important;border-radius:10px !important;font-size:11px !important}
.admin-form textarea{min-height:88px !important}
.admin-form button{min-height:42px !important}
.card h1{font-size:20px !important;line-height:1.2 !important}
.card p{font-size:11px !important;line-height:1.6 !important}
.admin-footer{margin:18px clamp(18px,2.3vw,36px) 0 !important;padding:14px 18px !important;border-radius:15px 15px 0 0 !important;font-size:10px !important}

/* Keep the separate login screen recognizable, with matching text scale. */
.portal-topbar{min-height:96px !important;padding:16px clamp(18px,2.3vw,36px) !important}
.portal-topbar-link{min-height:40px !important;padding:0 13px !important;font-size:10px !important}
.portal-login-card{border-radius:18px !important}
.portal-login-card h2{font-size:20px !important;line-height:1.2 !important}
.portal-login-card p{font-size:11px !important;line-height:1.6 !important}

@media(max-width:1180px){
  .admin-page,.admin-shell{display:block !important;grid-template-columns:1fr !important}
  .admin-main{grid-column:auto !important}
  .admin-sidebar{position:relative !important;width:100% !important;min-width:0 !important;max-width:none !important;height:auto !important;padding:18px 20px !important;overflow:visible !important}
  .sidebar-inner{height:auto !important;overflow:visible !important}
  .side-nav{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .side-nav a{height:auto !important;min-height:38px !important}
  .command-grid,.report-chart-grid,.panel-grid{grid-template-columns:1fr !important}
  .quick-launch{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .metric-grid,.mini-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:820px){
  .premium-admin-header .admin-topbar-inner{grid-template-columns:minmax(0,1fr) !important;align-items:start !important;justify-items:start !important;gap:14px !important}
  .premium-admin-header .premium-header-actions{align-self:start !important;justify-content:flex-start !important;max-width:none !important}
  .admin-main > header.topbar,.admin-main > header.admin-topbar:not(.premium-admin-header){min-height:0 !important}
}
@media(max-width:720px){
  .content-wrap,.admin-main > .content{padding:16px 13px 28px !important}
  .command-hero,.panel,.report-chart-card,.card{padding:16px !important;border-radius:15px !important}
  .command-hero h2{max-width:28ch !important;font-size:22px !important}
  .quick-launch{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .metric-grid,.mini-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .report-chart-card .chart-wrap{min-height:230px !important}
  .report-chart-card.small-chart .chart-wrap{min-height:205px !important}
  .admin-footer{margin:16px 13px 0 !important;align-items:flex-start !important;flex-direction:column !important}
  .portal-topbar{min-height:76px !important;padding:12px 14px !important}
}
@media(max-width:620px){
  .side-nav{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .premium-admin-header .admin-header-title p{max-width:48ch !important;font-size:11.5px !important}
  .premium-admin-header .premium-header-actions{width:100% !important;gap:7px !important}
  .premium-admin-header .premium-header-actions .top-action{flex:1 1 0 !important;min-width:0 !important;min-height:40px !important;height:40px !important;padding:0 10px !important;font-size:9px !important}
}
@media(max-width:380px){
  .side-nav,.quick-launch,.metric-grid,.mini-grid{grid-template-columns:1fr !important}
}

/* Higher-specificity normalization for screens with older page-local CSS. */
body .admin-page,
body .admin-shell{
  grid-template-columns:264px minmax(0,1fr) !important;
}
body .admin-shell > aside.admin-sidebar,
body .admin-page > aside.admin-sidebar{
  width:264px !important;
  min-width:264px !important;
  max-width:264px !important;
  padding:22px 15px !important;
}
body .admin-shell > main.admin-main,
body .admin-page > main.admin-main{
  grid-column:2 !important;
  min-width:0 !important;
  width:100% !important;
}
body .admin-sidebar .admin-brand img{width:46px !important;height:46px !important;min-width:46px !important;max-width:46px !important;max-height:46px !important;padding:4px !important;border-radius:13px !important}
body .admin-sidebar .side-nav a{min-height:42px !important;height:auto !important;padding:8px 11px !important;font-size:12px !important;line-height:1.25 !important}

body main.admin-main > header.topbar,
body main.admin-main > header.admin-topbar:not(.premium-admin-header),
body main.admin-main > header.premium-admin-header{
  min-height:128px !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  padding:19px clamp(22px,2.6vw,42px) !important;
}
body main.admin-main > header.topbar .page-title,
body main.admin-main > header.admin-topbar .page-title,
body main.admin-main > header.premium-admin-header .page-title,
body main.admin-main > header.topbar > div:first-child,
body main.admin-main > header.admin-topbar > div:first-child,
body main.admin-main > header.premium-admin-header .admin-header-title{
  display:flex !important;
  min-width:0 !important;
  max-width:min(680px,calc(100% - 320px)) !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}
body main.admin-main > header.topbar .page-title span,
body main.admin-main > header.admin-topbar .page-title span,
body main.admin-main > header.premium-admin-header .page-title span,
body main.admin-main > header.topbar .page-kicker,
body main.admin-main > header.admin-topbar .page-kicker,
body main.admin-main > header.premium-admin-header .page-kicker{
  display:inline-flex !important;
  min-height:0 !important;
  align-self:flex-start !important;
  gap:7px !important;
  margin:0 0 7px !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.09em !important;
  white-space:normal !important;
}
body main.admin-main > header.topbar .page-title h1,
body main.admin-main > header.admin-topbar .page-title h1,
body main.admin-main > header.premium-admin-header .page-title h1,
body main.admin-main > header.topbar h1,
body main.admin-main > header.admin-topbar h1,
body main.admin-main > header.premium-admin-header h1{
  width:100% !important;
  margin:0 0 5px !important;
  font-size:clamp(25px,2.1vw,30px) !important;
  font-weight:850 !important;
  line-height:1.04 !important;
  letter-spacing:-.045em !important;
  text-align:left !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
body main.admin-main > header.topbar .page-title p,
body main.admin-main > header.admin-topbar .page-title p,
body main.admin-main > header.premium-admin-header .page-title p,
body main.admin-main > header.topbar p,
body main.admin-main > header.admin-topbar p,
body main.admin-main > header.premium-admin-header p{
  max-width:58ch !important;
  margin:0 !important;
  font-size:11.8px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  text-align:left !important;
}
body main.admin-main > header.topbar .topbar-actions,
body main.admin-main > header.topbar .top-actions,
body main.admin-main > header.admin-topbar .topbar-actions,
body main.admin-main > header.admin-topbar .top-actions,
body main.admin-main > header.premium-admin-header .topbar-actions,
body main.admin-main > header.premium-admin-header .top-actions,
body main.admin-main > header.premium-admin-header .premium-header-actions{
  position:static !important;
  display:flex !important;
  align-self:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex:0 1 auto !important;
  flex-wrap:wrap !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  pointer-events:auto !important;
}
body main.admin-main > header.topbar .topbar-actions > a,
body main.admin-main > header.topbar .topbar-actions > button,
body main.admin-main > header.topbar .top-actions > a,
body main.admin-main > header.topbar .top-actions > button,
body main.admin-main > header.admin-topbar .topbar-actions > a,
body main.admin-main > header.admin-topbar .topbar-actions > button,
body main.admin-main > header.admin-topbar .top-actions > a,
body main.admin-main > header.admin-topbar .top-actions > button,
body main.admin-main > header.premium-admin-header .premium-header-actions .top-action{
  min-width:0 !important;
  min-height:44px !important;
  height:44px !important;
  padding:0 15px !important;
  border-radius:999px !important;
  font-size:10px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

body main.admin-main > .stats-grid,
body main.admin-main > .metric-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
}
body main.admin-main .stat-card,
body main.admin-main .metric-card{
  min-width:0 !important;
  min-height:92px !important;
  padding:14px 15px !important;
  border-radius:15px !important;
}
body main.admin-main .stat-icon,
body main.admin-main .metric-icon{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  margin:0 0 9px !important;
  border-radius:11px !important;
  font-size:16px !important;
}
body main.admin-main .panel,
body main.admin-main .side-card,
body main.admin-main .detail-card,
body main.admin-main .info-card,
body main.admin-main .service-card,
body main.admin-main .error-card,
body main.admin-main .project-summary-card,
body main.admin-main .timeline-card,
body main.admin-main .export-card,
body main.admin-main .upload-card,
body main.admin-main .company-card,
body main.admin-main .banking-card,
body main.admin-main .settings-preview-card,
body main.admin-main .ticket-note-card,
body main.admin-main .quote-side-card,
body main.admin-main .form-panel,
body main.admin-main .edit-card,
body main.admin-main .service-form-card,
body main.admin-main .staff-form-card,
body main.admin-main .product-card-item,
body main.admin-main .role-card-item,
body main.admin-main .tips-card{
  min-width:0 !important;
  padding:18px !important;
  border-radius:17px !important;
}
body main.admin-main .filter-form,
body main.admin-main .form-grid,
body main.admin-main .detail-grid,
body main.admin-main .info-grid{
  gap:12px !important;
}
body main.admin-main .data-table,
body main.admin-main .quotes-table{
  width:100% !important;
}
body main.admin-main .panel-header{gap:12px !important;margin-bottom:12px !important}
body main.admin-main .panel-header h2,
body main.admin-main .panel-header h3{margin:0 0 4px !important;font-size:14px !important;line-height:1.3 !important}
body main.admin-main .panel-header p{font-size:10px !important;line-height:1.55 !important}
body main.admin-main .filter-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body main.admin-main .filter-form select,
body main.admin-main .filter-form textarea,
body main.admin-main .form-grid input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body main.admin-main .form-grid select,
body main.admin-main .form-grid textarea,
body main.admin-main .form-control,
body main.admin-main input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body main.admin-main select,
body main.admin-main textarea{
  min-height:36px !important;
  padding:8px 10px !important;
  border-radius:9px !important;
  font-size:10px !important;
  line-height:1.4 !important;
}
body main.admin-main textarea{min-height:86px !important}
body main.admin-main .btn,
body main.admin-main button:not(.mobile-menu-btn){
  min-height:36px !important;
  padding:8px 12px !important;
  border-radius:9px !important;
  font-size:10px !important;
  line-height:1.2 !important;
}
body main.admin-main .table-wrap{width:100% !important;overflow-x:auto !important;border-radius:12px !important}
body main.admin-main table th{padding:10px 11px !important;font-size:9px !important;letter-spacing:.08em !important}
body main.admin-main table td{padding:10px 11px !important;font-size:10px !important;line-height:1.45 !important}
body main.admin-main .pill,
body main.admin-main .status-pill{padding:5px 8px !important;font-size:9px !important}

@media(max-width:1180px){
  body .admin-page,
  body .admin-shell{
    display:block !important;
    grid-template-columns:1fr !important;
  }
  body .admin-shell > aside.admin-sidebar,
  body .admin-page > aside.admin-sidebar{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    padding:18px 20px !important;
    overflow:visible !important;
  }
  body main.admin-main > header.topbar,
  body main.admin-main > header.admin-topbar:not(.premium-admin-header),
  body main.admin-main > header.premium-admin-header{
    min-height:0 !important;
    padding:18px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  body main.admin-main > header.topbar .page-title,
  body main.admin-main > header.admin-topbar .page-title,
  body main.admin-main > header.premium-admin-header .page-title,
  body main.admin-main > header.premium-admin-header .admin-header-title{
    width:100% !important;
    max-width:none !important;
  }
  body main.admin-main > header.topbar .topbar-actions,
  body main.admin-main > header.topbar .top-actions,
  body main.admin-main > header.admin-topbar .topbar-actions,
  body main.admin-main > header.admin-topbar .top-actions,
  body main.admin-main > header.premium-admin-header .premium-header-actions{
    align-self:flex-start !important;
    justify-content:flex-start !important;
    width:100% !important;
    max-width:none !important;
  }
  body main.admin-main > .stats-grid,
  body main.admin-main > .metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:720px){
  body main.admin-main .detail-grid,
  body main.admin-main .info-grid,
  body main.admin-main .form-grid{
    grid-template-columns:1fr !important;
  }
  body main.admin-main > .stats-grid,
  body main.admin-main > .metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}