@import url("/static/css/product-ux-v1.1.css");

/* CyberLink Global Theme v1 */
:root{--cl-accent:#0b7ff2;--cl-cyan:#16bee7;--cl-navy:#071525;color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

.cl-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:42px;height:36px;padding:0 11px;border:1px solid #dce4ec;
  border-radius:999px;background:#fff;color:#344150;font:inherit;
  font-size:12px;font-weight:750;cursor:pointer;box-shadow:0 2px 8px rgba(20,36,58,.035)
}
.cl-theme-toggle:hover{background:#f7fafc}
.cl-theme-toggle-icon{font-size:14px;line-height:1}
.admin-topbar .cl-theme-toggle,.customer-topbar .cl-theme-toggle{margin-left:auto;margin-right:10px}
.cl-theme-toggle.cl-theme-floating{position:fixed;z-index:9999;top:16px;right:18px}

.admin-nav-item,.customer-nav-item,.admin-primary,.workspace-primary,.support-customer-primary{
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease
}
.admin-primary:hover,.workspace-primary:hover,.support-customer-primary:hover{transform:translateY(-1px)}
.admin-primary:active,.workspace-primary:active,.support-customer-primary:active{transform:translateY(0)}

html[data-theme="dark"]{
  --admin-page:#08111d;--admin-card:#0f1a28;--admin-text:#e7edf4;--admin-muted:#98a6b7;--admin-line:#233246;
  --c-page:#08111d;--c-card:#0f1a28;--c-text:#e7edf4;--c-muted:#98a6b7;--c-line:#233246
}
html[data-theme="dark"] body{background:#08111d!important;color:#e7edf4!important}
html[data-theme="dark"] .admin-topbar,html[data-theme="dark"] .customer-topbar{
  background:rgba(10,20,32,.96)!important;border-color:#233246!important
}
html[data-theme="dark"] .admin-sidebar,html[data-theme="dark"] .customer-sidebar{
  background:radial-gradient(circle at 10% 4%,rgba(22,190,231,.13),transparent 29%),linear-gradient(180deg,#0b1d31,#06111e)!important
}

html[data-theme="dark"] .admin-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .v22-panel,
html[data-theme="dark"] .workspace-hero,
html[data-theme="dark"] .workspace-panel,
html[data-theme="dark"] .workspace-service-card,
html[data-theme="dark"] .cw-hero,
html[data-theme="dark"] .cw-section,
html[data-theme="dark"] .cw-product,
html[data-theme="dark"] .voice-v22-metrics article,
html[data-theme="dark"] .voice-v22-card,
html[data-theme="dark"] .support-message,
html[data-theme="dark"] .customer-service-card,
html[data-theme="dark"] .customer-account-card,
html[data-theme="dark"] .support-customer-panel,
html[data-theme="dark"] .support-customer-message,
html[data-theme="dark"] .card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .modal-content{
  background:#0f1a28!important;border-color:#233246!important;color:#e7edf4!important;
  box-shadow:0 3px 14px rgba(0,0,0,.16)!important
}

html[data-theme="dark"] .customer-support-card,
html[data-theme="dark"] .cw-support-strip,
html[data-theme="dark"] .support-message.staff,
html[data-theme="dark"] .support-customer-message.staff{
  background:linear-gradient(120deg,#101c2a,#122235)!important;border-color:#29405a!important
}

html[data-theme="dark"] .admin-metrics article,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .workspace-metrics>div,
html[data-theme="dark"] .cw-metrics article{
  background:#0f1a28!important;border-color:#233246!important
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#0b1623!important;color:#e7edf4!important;border-color:#2a3a4e!important
}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#728197!important}
html[data-theme="dark"] input:focus,html[data-theme="dark"] select:focus,html[data-theme="dark"] textarea:focus{
  border-color:#3d8ed9!important;box-shadow:0 0 0 3px rgba(61,142,217,.13)!important
}

html[data-theme="dark"] .secondary-action,
html[data-theme="dark"] .workspace-button,
html[data-theme="dark"] .support-status-form button{
  background:#111e2d!important;color:#dce6f0!important;border-color:#2a3a4e!important
}
html[data-theme="dark"] .secondary-action:hover,
html[data-theme="dark"] .workspace-button:hover,
html[data-theme="dark"] .support-status-form button:hover{background:#162638!important}

html[data-theme="dark"] .admin-customer-row,
html[data-theme="dark"] .customer-row,
html[data-theme="dark"] .customer-v22-row,
html[data-theme="dark"] .admin-tool-link,
html[data-theme="dark"] .quick-action,
html[data-theme="dark"] .workspace-user-summary,
html[data-theme="dark"] .workspace-user-row,
html[data-theme="dark"] .support-v22-row,
html[data-theme="dark"] .support-customer-ticket{border-color:#1f2d3e!important}

html[data-theme="dark"] .admin-customer-row:hover,
html[data-theme="dark"] .customer-row:hover,
html[data-theme="dark"] .customer-v22-row:hover,
html[data-theme="dark"] .admin-tool-link:hover,
html[data-theme="dark"] .quick-action:hover,
html[data-theme="dark"] .support-v22-row:hover,
html[data-theme="dark"] .support-customer-ticket:hover{background:#111e2d!important}

html[data-theme="dark"] .customer-table th{
  background:#0c1724!important;color:#9fb0c4!important;border-color:#233246!important
}
html[data-theme="dark"] .customer-table td{border-color:#1f2d3e!important}
html[data-theme="dark"] .customer-table tbody tr:hover td{background:#111e2d!important}

html[data-theme="dark"] .workspace-tabs{background:#0d1825!important;border-color:#233246!important}
html[data-theme="dark"] .workspace-tabs a{color:#a9b6c5!important}
html[data-theme="dark"] .workspace-tabs a.active{
  background:#16304c!important;color:#75baff!important;box-shadow:inset 0 0 0 1px #244d73!important
}

html[data-theme="dark"] .workspace-meta,
html[data-theme="dark"] .v22-pagehead-meta,
html[data-theme="dark"] .workspace-tags span,
html[data-theme="dark"] .service-tags span,
html[data-theme="dark"] .customer-v22-services span{
  background:#132133!important;border-color:#26394f!important;color:#a9c3dc!important
}
html[data-theme="dark"] .admin-status,html[data-theme="dark"] .status{
  background:#172231!important;color:#aeb8c5!important
}
html[data-theme="dark"] .admin-status.active,
html[data-theme="dark"] .status.active,
html[data-theme="dark"] .customer-pill.active,
html[data-theme="dark"] .voice-ready,
html[data-theme="dark"] .support-status.resolved,
html[data-theme="dark"] .support-customer-status.resolved{
  background:#123128!important;color:#78d7aa!important
}
html[data-theme="dark"] .voice-paused,
html[data-theme="dark"] .support-status.waiting_customer,
html[data-theme="dark"] .support-customer-status.waiting_customer{
  background:#352b14!important;color:#e9c568!important
}
html[data-theme="dark"] .voice-unconfigured{background:#1b2634!important;color:#aeb8c5!important}
html[data-theme="dark"] .support-status.open,
html[data-theme="dark"] .support-customer-status.open{
  background:#12304c!important;color:#79baff!important
}

html[data-theme="dark"] .admin-page-hero p,
html[data-theme="dark"] .page-heading p,
html[data-theme="dark"] .v22-pagehead p,
html[data-theme="dark"] .workspace-pagehead p,
html[data-theme="dark"] .cw-section-head p,
html[data-theme="dark"] .cw-product-copy p,
html[data-theme="dark"] .customer-welcome p,
html[data-theme="dark"] .customer-service-copy p,
html[data-theme="dark"] .customer-support-card p,
html[data-theme="dark"] .support-customer-head p,
html[data-theme="dark"] .support-customer-panel-head p{
  color:#98a6b7!important
}

html[data-theme="dark"] .alert.success,
html[data-theme="dark"] .voice-notice.success,
html[data-theme="dark"] .support-notice.success{
  background:#102b24!important;border-color:#24533f!important;color:#8bd9b2!important
}
html[data-theme="dark"] .alert.error,
html[data-theme="dark"] .voice-notice.error,
html[data-theme="dark"] .support-notice.error{
  background:#32191c!important;border-color:#633139!important;color:#f0a4ad!important
}
html[data-theme="dark"] .customer-topbar-context{
  background:#102b24!important;border-color:#24533f!important;color:#86d5ae!important
}
html[data-theme="dark"] .cl-theme-toggle{
  background:#111e2d;color:#dce6f0;border-color:#2a3a4e;box-shadow:0 2px 8px rgba(0,0,0,.18)
}
html[data-theme="dark"] .cl-theme-toggle:hover{background:#162638}
html[data-theme="dark"] a{color:#75baff}

/* =========================================================
   CyberLink Dark Mode Contrast & Polish v1.1
   ========================================================= */

/* Slightly richer page/card separation */
html[data-theme="dark"] body{
  background:#07101b!important;
}
html[data-theme="dark"] .admin-main,
html[data-theme="dark"] .customer-main{
  background:
    radial-gradient(circle at 72% 8%,rgba(14,104,184,.045),transparent 28%),
    #07101b!important;
}
html[data-theme="dark"] .admin-panel,
html[data-theme="dark"] .v22-panel,
html[data-theme="dark"] .cw-section,
html[data-theme="dark"] .cw-product,
html[data-theme="dark"] .voice-v22-card,
html[data-theme="dark"] .customer-service-card,
html[data-theme="dark"] .customer-account-card,
html[data-theme="dark"] .support-customer-panel{
  background:#101b2a!important;
  border-color:#26364a!important;
}

/* Metric cards: more visible than the page without becoming bright */
html[data-theme="dark"] .admin-metrics article,
html[data-theme="dark"] .workspace-metrics>div,
html[data-theme="dark"] .cw-metrics article,
html[data-theme="dark"] .voice-v22-metrics article{
  background:linear-gradient(145deg,#121e2d,#101a28)!important;
  border-color:#293a4e!important;
}
html[data-theme="dark"] .admin-metrics strong,
html[data-theme="dark"] .workspace-metrics strong,
html[data-theme="dark"] .cw-metrics strong,
html[data-theme="dark"] .voice-v22-metrics strong{
  color:#f1f5fa!important;
}

/* Improve secondary text throughout dark mode */
html[data-theme="dark"] .admin-topbar span,
html[data-theme="dark"] .admin-identity span,
html[data-theme="dark"] .admin-customer-copy span,
html[data-theme="dark"] .admin-tool-link small,
html[data-theme="dark"] .workspace-user-copy span,
html[data-theme="dark"] .workspace-service-facts span,
html[data-theme="dark"] .cw-product-facts span,
html[data-theme="dark"] .voice-v22-form label small,
html[data-theme="dark"] .support-v22-copy small,
html[data-theme="dark"] .customer-user-copy span,
html[data-theme="dark"] .customer-service-copy p,
html[data-theme="dark"] .customer-account-grid span{
  color:#a6b4c5!important;
}

/* Sidebar labels were too dim */
html[data-theme="dark"] .admin-nav-label,
html[data-theme="dark"] .customer-nav-label{
  color:rgba(255,255,255,.48)!important;
}
html[data-theme="dark"] .admin-nav-item,
html[data-theme="dark"] .customer-nav-item{
  color:rgba(255,255,255,.77)!important;
}
html[data-theme="dark"] .admin-nav-item:hover,
html[data-theme="dark"] .customer-nav-item:hover:not(.passive){
  color:#fff!important;
  background:rgba(255,255,255,.055)!important;
}
html[data-theme="dark"] .admin-nav-item.active,
html[data-theme="dark"] .customer-nav-item.active{
  color:#fff!important;
  background:linear-gradient(90deg,rgba(27,112,203,.31),rgba(15,87,163,.13))!important;
}

/* Footer identity */
html[data-theme="dark"] .admin-identity strong,
html[data-theme="dark"] .customer-user-copy strong{
  color:#f0f4f8!important;
}
html[data-theme="dark"] .admin-signout,
html[data-theme="dark"] .customer-signout{
  color:#a7b4c3!important;
}

/* Primary actions: less neon / better integrated */
html[data-theme="dark"] .admin-primary,
html[data-theme="dark"] .primary-action,
html[data-theme="dark"] .workspace-primary,
html[data-theme="dark"] .support-customer-primary{
  background:linear-gradient(120deg,#148bd1,#287be1)!important;
  color:#f7fbff!important;
  box-shadow:0 7px 18px rgba(15,108,199,.16)!important;
}
html[data-theme="dark"] .admin-primary:hover,
html[data-theme="dark"] .primary-action:hover,
html[data-theme="dark"] .workspace-primary:hover,
html[data-theme="dark"] .support-customer-primary:hover{
  background:linear-gradient(120deg,#1784c3,#276fd0)!important;
}

/* Tool icons: remove the harsh white blocks */
html[data-theme="dark"] .admin-tool-link>span,
html[data-theme="dark"] .admin-company-avatar,
html[data-theme="dark"] .company-avatar,
html[data-theme="dark"] .customer-v22-avatar,
html[data-theme="dark"] .workspace-user-avatar,
html[data-theme="dark"] .cw-product-icon,
html[data-theme="dark"] .voice-v22-customer .admin-company-avatar,
html[data-theme="dark"] .support-v22-icon,
html[data-theme="dark"] .customer-service-icon,
html[data-theme="dark"] .customer-support-icon{
  background:#16283b!important;
  color:#75baff!important;
  border:1px solid #28415b!important;
}

/* Slightly stronger headings and links */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong{
  color:#eef3f8;
}
html[data-theme="dark"] .admin-panel-head>a,
html[data-theme="dark"] .text-link,
html[data-theme="dark"] .cw-section-head>a,
html[data-theme="dark"] .voice-v22-access a,
html[data-theme="dark"] .support-v22-back a,
html[data-theme="dark"] .support-customer-back a{
  color:#80bdff!important;
}

/* Topbar mode controls */
html[data-theme="dark"] .admin-mode-pill{
  background:#11243a!important;
  border-color:#27445f!important;
  color:#83c1ff!important;
}
html[data-theme="dark"] .cl-theme-toggle{
  background:#101d2b!important;
  border-color:#293b50!important;
  color:#d8e2ed!important;
}

/* Better separation inside large panels */
html[data-theme="dark"] .admin-panel-head,
html[data-theme="dark"] .v22-panel-head,
html[data-theme="dark"] .voice-v22-customer,
html[data-theme="dark"] .support-customer-panel-head{
  border-color:#223247!important;
}

/* Avoid pure-white inactive/neutral chips */
html[data-theme="dark"] .voice-unconfigured,
html[data-theme="dark"] .workspace-button,
html[data-theme="dark"] .secondary-action{
  box-shadow:none!important;
}

/* Auth / standalone surfaces */
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .card{
  background:#101b2a!important;
  border-color:#26364a!important;
}

/* =========================================================
   CyberLink Final UI Consistency v1
   ========================================================= */

/* Support filter controls */
html[data-theme="dark"] .support-v22-filters a{
  background:#101d2b!important;
  color:#b9c7d6!important;
  border-color:#2a3b50!important;
}
html[data-theme="dark"] .support-v22-filters a:hover{
  background:#162638!important;
  color:#fff!important;
}
html[data-theme="dark"] .support-v22-filters a.active{
  background:#1a426b!important;
  border-color:#275b8d!important;
  color:#fff!important;
}

/* Any remaining light utility/filter controls */
html[data-theme="dark"] .filterbar a,
html[data-theme="dark"] .support-filterbar a,
html[data-theme="dark"] .tab-button,
html[data-theme="dark"] .filter-button,
html[data-theme="dark"] .chip-button{
  background:#101d2b!important;
  color:#b9c7d6!important;
  border-color:#2a3b50!important;
}
html[data-theme="dark"] .filterbar a.active,
html[data-theme="dark"] .support-filterbar a.active,
html[data-theme="dark"] .tab-button.active,
html[data-theme="dark"] .filter-button.active{
  background:#1a426b!important;
  color:#fff!important;
}

/* Remaining common white surfaces */
html[data-theme="dark"] .create-panel,
html[data-theme="dark"] .reply-panel,
html[data-theme="dark"] .conversation-panel,
html[data-theme="dark"] .support-admin-panel,
html[data-theme="dark"] .voice-admin-panel,
html[data-theme="dark"] .customer-form,
html[data-theme="dark"] .workspace-details,
html[data-theme="dark"] .workspace-permissions>div,
html[data-theme="dark"] .cw-service-select>label,
html[data-theme="dark"] .v22-service-choice{
  background:#101b2a!important;
  color:#e7edf4!important;
  border-color:#26364a!important;
}

/* Neutral informational strips */
html[data-theme="dark"] .workspace-note,
html[data-theme="dark"] .cw-admin-note{
  background:#171f29!important;
  border-color:#3a4655!important;
  color:#bac4cf!important;
}

/* Dark empty states */
html[data-theme="dark"] .v22-empty,
html[data-theme="dark"] .workspace-empty,
html[data-theme="dark"] .support-customer-empty,
html[data-theme="dark"] .admin-empty{
  color:#a8b5c4!important;
}

/* Dark service choice rows */
html[data-theme="dark"] .v22-service-choice:hover,
html[data-theme="dark"] .cw-service-select>label:hover{
  background:#142235!important;
  border-color:#34506d!important;
}

/* Avoid bright native option surfaces where supported */
html[data-theme="dark"] option{
  background:#0b1623;
  color:#e7edf4;
}

/* Consistent scrollbar on Chromium/WebKit */
html[data-theme="dark"] *{
  scrollbar-color:#31465e #0b1522;
}
html[data-theme="dark"] *::-webkit-scrollbar{width:10px;height:10px}
html[data-theme="dark"] *::-webkit-scrollbar-track{background:#0b1522}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{
  background:#31465e;border-radius:999px;border:2px solid #0b1522
}

/* Better ticket queue row hierarchy */
.support-v22-row{
  min-height:68px;
}
.support-v22-copy strong{
  letter-spacing:-.01em;
}
html[data-theme="dark"] .support-v22-row{
  color:#e8eef5!important;
}

/* Keep inactive/passive navigation readable but clearly secondary */
html[data-theme="dark"] .customer-nav-item.passive{
  color:rgba(255,255,255,.5)!important;
}

/* Final general fallback: never leave standard HTML controls white */
html[data-theme="dark"] button:not(.admin-primary):not(.workspace-primary):not(.support-customer-primary):not(.cl-theme-toggle){
  color:#dce6f0;
}

/* =========================================================
   CyberLink Accessibility + Responsive Polish v1
   ========================================================= */

/* Keyboard focus: visible, consistent, and theme-aware */
:where(
  a,button,input,select,textarea,summary,
  .admin-nav-item,.customer-nav-item,.workspace-tabs a
):focus-visible{
  outline:3px solid rgba(22,126,242,.38)!important;
  outline-offset:2px!important;
}
html[data-theme="dark"] :where(
  a,button,input,select,textarea,summary,
  .admin-nav-item,.customer-nav-item,.workspace-tabs a
):focus-visible{
  outline-color:rgba(117,186,255,.55)!important;
}

/* Disabled / unavailable actions */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"],
.cw-disabled-action{
  cursor:not-allowed!important;
  opacity:.58!important;
  box-shadow:none!important;
}
button:disabled:hover,
[aria-disabled="true"]:hover{
  transform:none!important;
}

/* Long names and emails should never blow up layouts */
.admin-identity,
.customer-user,
.admin-customer-copy,
.customer-v22-name,
.workspace-user-copy,
.voice-v22-customer>div:nth-child(2),
.support-v22-copy,
.support-customer-ticket-copy{
  min-width:0;
}
.admin-identity strong,
.admin-identity span,
.customer-user-copy strong,
.customer-user-copy span,
.admin-customer-copy strong,
.admin-customer-copy span,
.customer-v22-name strong,
.customer-v22-name span,
.workspace-user-copy strong,
.workspace-user-copy span,
.voice-v22-customer strong,
.support-v22-copy strong,
.support-v22-copy span,
.support-customer-ticket-copy strong,
.support-customer-ticket-copy span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Tables and row-like layouts */
.table-wrap,
.customer-table,
.support-v22-panel,
.voice-v22-panel,
.workspace-panel,
.cw-section{
  max-width:100%;
}
.table-wrap{
  overflow-x:auto;
  overscroll-behavior-inline:contain;
}
.customer-table{
  min-width:720px;
}

/* Forms */
input,select,textarea,button{
  max-width:100%;
}
textarea{
  line-height:1.55;
}
label{
  min-width:0;
}

/* Ensure taps are comfortable */
@media (pointer:coarse){
  .admin-nav-item,.customer-nav-item,
  .workspace-tabs a,
  .support-v22-filters a,
  .cl-theme-toggle{
    min-height:44px;
  }
  button,
  .admin-primary,.workspace-primary,.workspace-button,
  .support-customer-primary{
    min-height:44px;
  }
}

/* Medium screens */
@media(max-width:1180px){
  .admin-content{
    padding-left:30px;
    padding-right:30px;
  }

  .admin-topbar{
    padding-left:28px;
    padding-right:28px;
  }

  .customers-v22-layout,
  .support-ticket-v22-layout,
  .support-customer-grid{
    grid-template-columns:1fr!important;
  }

  .create-panel{
    position:static!important;
  }

  .customer-account-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .voice-v22-bottom{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }

  .voice-v22-access{
    text-align:left!important;
  }
}

/* Tablet */
@media(max-width:900px){
  .admin-sidebar{
    width:224px!important;
  }
  .admin-main{
    margin-left:224px!important;
  }

  .customer-sidebar{
    width:238px!important;
  }
  .customer-main{
    margin-left:238px!important;
  }

  .admin-content,
  .customer-content{
    padding-left:24px!important;
    padding-right:24px!important;
  }

  .admin-metrics,
  .cw-metrics,
  .voice-v22-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .cw-products,
  .customer-service-grid{
    grid-template-columns:1fr!important;
  }

  .customer-v22-row{
    grid-template-columns:42px minmax(0,1fr) auto!important;
  }
  .customer-v22-services{
    grid-column:2/-1!important;
  }
}

/* Small screens */
@media(max-width:720px){
  .admin-sidebar,
  .customer-sidebar{
    display:none!important;
  }
  .admin-main,
  .customer-main{
    margin-left:0!important;
  }

  .admin-topbar,
  .customer-topbar{
    min-height:64px;
    height:auto!important;
    padding:10px 16px!important;
    gap:8px;
  }

  .admin-topbar>div{
    min-width:0;
  }
  .admin-topbar span{
    display:none;
  }

  .cl-theme-toggle{
    min-width:40px;
    padding-left:10px;
    padding-right:10px;
  }
  .cl-theme-toggle-label{
    display:none;
  }

  .admin-content,
  .customer-content{
    padding:26px 16px 48px!important;
  }

  .admin-page-hero,
  .v22-pagehead,
  .customer-welcome,
  .support-customer-head{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:14px!important;
  }

  .admin-page-hero h1,
  .v22-pagehead h1,
  .customer-welcome h1{
    font-size:31px!important;
  }

  .admin-metrics,
  .cw-metrics,
  .voice-v22-metrics,
  .customer-account-grid{
    grid-template-columns:1fr!important;
  }

  .workspace-tabs{
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    scrollbar-width:none;
  }
  .workspace-tabs::-webkit-scrollbar{
    display:none;
  }
  .workspace-tabs a{
    flex:0 0 auto;
  }

  .customer-v22-row,
  .support-v22-row,
  .support-customer-ticket{
    grid-template-columns:40px minmax(0,1fr)!important;
  }

  .customer-v22-row>.admin-status,
  .customer-v22-services,
  .customer-v22-arrow,
  .support-v22-row>.support-status,
  .support-v22-arrow,
  .support-customer-ticket>.support-customer-status,
  .support-customer-ticket-arrow{
    grid-column:2!important;
  }

  .cw-hero{
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  .cw-hero-side{
    width:100%;
    flex-wrap:wrap;
  }

  .cw-support-strip{
    grid-template-columns:42px minmax(0,1fr)!important;
  }
  .cw-support-strip>a{
    grid-column:1/-1!important;
    justify-self:start;
  }

  .workspace-form-grid,
  .workspace-permissions,
  .cw-service-select{
    grid-template-columns:1fr!important;
  }

  .voice-v22-actions{
    flex-wrap:wrap;
  }

  .support-status-form{
    flex-direction:column!important;
    align-items:stretch!important;
  }
}

/* Very small screens */
@media(max-width:420px){
  .admin-content,
  .customer-content{
    padding-left:13px!important;
    padding-right:13px!important;
  }

  .admin-panel,.v22-panel,.cw-section,
  .customer-service-card,.customer-account-card,
  .support-customer-panel{
    border-radius:12px!important;
  }

  .admin-page-hero h1,
  .v22-pagehead h1,
  .customer-welcome h1{
    font-size:28px!important;
  }

  .admin-mode-pill{
    display:none!important;
  }
}