/* HiTechCloud portal — services pages (service list, service detail, domains, service groups).
   Uses the tokens and components of portal.css; page-specific rules only. */

/* ---------- List toolbar ---------- */
/* main.js [data-sorter] puts .active on the <li>, not on the link. */
.cm-seg > li { list-style: none; display: flex; }
.cm-seg > li.active > a { background: var(--surface); color: var(--foreground) !important; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.06); }
.cm-filter-btn.shown { background: var(--secondary) !important; }

.cm-filters { margin-bottom: 12px; }
.cm-filters .cm-card__body { display: flex; flex-direction: column; gap: 16px; }
.cm-filters__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 16px; }
@media (min-width: 768px) { .cm-filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cm-filters__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cm-filters__grid label { margin-bottom: 6px; }
.cm-filters__checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.cm-filters__checks label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; cursor: pointer; }
.cm-filters__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-filters .input-group > .custom-select, .cm-filters .input-group > select.form-control { flex: 0 0 64px; max-width: 64px; }

/* Sortable headers (main.js swaps the Material ligature inside .sort-icon) */
.cm-app .table thead th a[data-sorter] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; }
.cm-app .table thead th a[data-sorter]:hover { color: var(--foreground); }
.cm-app .table thead th .sort-icon { order: 2; font-size: 16px !important; opacity: .6; }

/* ---------- Service rows ---------- */
.cm-svc-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cm-svc-name__icon { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--item-hover); color: color-mix(in srgb, var(--foreground) 72%, transparent); }
.cm-svc-name__text { min-width: 0; }
.cm-svc-name__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 500; }
.cm-svc-name__title a { color: var(--foreground); }
.cm-svc-name__title a:hover { color: var(--primary); text-decoration: none; }
.cm-svc-name__sub { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.cm-svc-name__sub .cm-mono { font-size: 12px; }
.cm-label-badge:empty { display: none !important; }
.cm-app .badge.cm-label-badge { background: var(--neutral-bg); color: var(--neutral); }
.cm-app .badge.cm-label-badge::before { display: none; }
.cm-row-actions { display: inline-flex; align-items: center; gap: 4px; }
.cm-app .table tr.expired td:first-child, .cm-app .table tr.nearexpire td:first-child { box-shadow: inset 2px 0 0 var(--warning); }
.cm-app .table tr.expired td:first-child { box-shadow: inset 2px 0 0 var(--error); }
.cm-expiry-note { display: block; font-size: 12px; color: var(--muted); }
.cm-expiry-note.is-warning { color: var(--warning); }
@media (max-width: 575.98px) {
  .cm-app table.cm-stack-sm td.cm-td-first { padding-bottom: 6px; }
  .cm-app table.cm-stack-sm .cm-row-actions { margin-top: 6px; }
}

/* ---------- Service / domain detail ---------- */
.cm-record-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cm-record-head__title h1 { margin: 0; font-size: 18px; font-weight: 600; text-wrap: balance; }
.cm-meta-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cm-meta-item .cm-i { color: var(--muted); }
.cm-meta-item a { color: var(--foreground); }

.cm-svc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1200px) {
  .cm-svc-layout--left { grid-template-columns: 220px minmax(0, 1fr); }
  .cm-svc-layout--right { grid-template-columns: minmax(0, 1fr) 220px; }
  .cm-svc-layout--right > .cm-svc-side { order: 2; }
}
.cm-svc-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* Side navigation built from left_nav_service.tpl / left_nav_domain.tpl (<li class="nav-item"><a class="nav-link">) */
.cm-svc-nav { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.cm-svc-nav::-webkit-scrollbar { display: none; }
@media (min-width: 1200px) { .cm-svc-nav { flex-direction: column; position: sticky; top: calc(var(--topbar-h) + 24px); } }
.cm-svc-nav > li { list-style: none; flex-shrink: 0; }
.cm-svc-nav .nav-link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: var(--radius); font-size: 14px; line-height: 1.35; color: color-mix(in srgb, var(--foreground) 72%, transparent) !important; white-space: nowrap; text-decoration: none !important; }
@media (min-width: 1200px) { .cm-svc-nav .nav-link { white-space: normal; } }
.cm-svc-nav .nav-link:hover { background: var(--item-hover); color: var(--foreground) !important; }
.cm-svc-nav .nav-link.active { background: var(--secondary); color: var(--foreground) !important; font-weight: 500; }
.cm-svc-nav .nav-link.text-danger { color: var(--danger) !important; }
.cm-svc-nav .nav-link.text-danger:hover { background: var(--danger-bg); }
.cm-svc-nav li.last { margin-top: 8px; }
.cm-svc-nav .widg-image, #vm-menu .widg-image { display: none !important; }

/* App widgets row (#vm-menu: main.js folds overflow into a "More" dropdown) */
.cm-app #vm-menu { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; min-width: 0; visibility: visible; }
.cm-app #vm-menu:empty { display: none; }
.cm-app #vm-menu > li { list-style: none; flex-shrink: 0; }
.cm-app #vm-menu > li > a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; font-weight: 500; color: var(--foreground) !important; white-space: nowrap; text-decoration: none !important; }
.cm-app #vm-menu > li > a:hover { background: var(--button-hover); }
.cm-app #vm-menu > li > a.active { background: var(--secondary); border-color: transparent; }
.cm-app #vm-menu > li > a.text-danger { color: var(--danger) !important; border-color: transparent; background: var(--danger-bg); }
.cm-app #vm-menu .dropdown-menu > li > a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--radius); color: var(--foreground) !important; text-decoration: none !important; white-space: nowrap; }
.cm-app #vm-menu .dropdown-menu > li > a:hover { background: var(--item-hover); }
.cm-app #vm-menu .dropdown-menu > li > a.text-danger { color: var(--danger) !important; }
.cm-svc-apps { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cm-svc-apps:has(#vm-menu:empty) { display: none; }

/* Widget content rendered by modules / widgets */
.cm-app .cm-svc-main .widget { min-width: 0; }

/* Spec grid inside a card (VPS limits, IPMI) */
.cm-spec-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cm-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cm-spec { display: flex; flex-direction: column; gap: 2px; padding: 12px 20px; border-top: 1px solid var(--border); min-width: 0; }
.cm-spec:nth-child(1) { border-top: 0; }
@media (min-width: 768px) { .cm-spec:nth-child(2) { border-top: 0; } }
.cm-spec__label { font-size: 13px; color: var(--muted); }
.cm-spec__value { font-size: 14px; overflow-wrap: anywhere; }
.cm-spec__value.cm-mono { font-size: 13px; }
.cm-spec__value a { color: var(--primary); }
.cm-spec__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.cm-dl dd .cm-inline-link { margin-left: 8px; font-size: 13px; }
.cm-dl dd .badge + .cm-inline-link { margin-left: 8px; }

/* Cancellation request */
.cm-cancel-reasons { display: flex; flex-direction: column; gap: 8px; }
.cm-cancel-reasons label { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; cursor: pointer; }
.cm-cancel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cm-cancel-actions .form-control { width: auto; min-width: 220px; }

/* Domain list: bulk action bar + toggles from domains-toggle.css */
.cm-app .domains-table thead.noncrucial th { height: auto; padding: 10px 16px; background: var(--item-hover) !important; color: var(--foreground) !important; font-size: 13px; }
.cm-app .domains-table .selected-names { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; }
.cm-app .domain-widgets .btn { min-width: 32px; }
.cm-app .domain-widgets { white-space: nowrap; }
@media (max-width: 575.98px) { .cm-app .domains-table thead.noncrucial { display: none; } }

/* ---------- Neutralise legacy layout rules (combined.min.css) inside the new detail page ---------- */
.cm-app .section-account.section-account-service.cm-svc-layout { display: grid; flex-direction: initial; margin: 0; }
.cm-app .section-account .service-details.cm-card { display: block; overflow: hidden; }
.cm-app .cm-svc-apps #vm-menu,
.cm-app .cm-svc-apps .cloud #vm-menu { position: static; top: auto; right: auto; left: auto; width: auto; max-width: 100%; max-height: none; justify-content: flex-start; flex: 1 1 auto; transition: none; }
.cm-app .cm-svc-apps #vm-menu li { background: transparent; }
.cm-app .cm-svc-apps #vm-menu > li > a { padding: 0 12px; font-weight: 500; font-size: 14px; line-height: 1; border-radius: var(--radius-sm); }
.cm-app .cm-svc-apps #vm-menu > li > a:hover { background: var(--button-hover); }
.cm-app .cm-svc-apps #vm-menu > li > a.dropdown-toggle { padding: 0 12px; }
.cm-app .cm-svc-apps #vm-menu .dropdown-menu li { background: transparent; }
.cm-app .services-table .cm-td-num { white-space: nowrap; }
.cm-app .cm-svc-nav.leftnavigation-box > li, .cm-app .cm-svc-nav.leftnavigation-box > li.nav-item { background: transparent; border: 0; margin: 0; padding: 0; box-shadow: none; }
.cm-app .cm-svc-nav.leftnavigation-box > li > a { margin: 0; border: 0; box-shadow: none; }
.cm-app .cm-svc-nav.leftnavigation-box { margin-right: 0; }
.cm-app .cm-svc-nav.leftnavigation-box .nav-item .nav-link { padding: 8px 12px; line-height: 1.35; font-weight: 400; color: color-mix(in srgb, var(--foreground) 72%, transparent) !important; }
.cm-app .cm-svc-nav.leftnavigation-box .nav-item:hover .nav-link { color: var(--foreground) !important; font-weight: 400; }
.cm-app .cm-svc-nav.leftnavigation-box .nav-item .nav-link.active { font-weight: 500; color: var(--foreground) !important; }
.cm-app .cm-svc-nav.leftnavigation-box .nav-item .nav-link.text-danger { color: var(--danger) !important; }
@media (max-width: 767.98px) { .cm-head-wrap .cm-page-head__actions { flex-shrink: 1; min-width: 0; width: 100%; } }
@media (max-width: 575.98px) {
  .cm-app table.services-table.cm-stack-sm tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
  .cm-app table.services-table.cm-stack-sm td { width: auto; padding: 0; }
  .cm-app table.services-table.cm-stack-sm td.cm-td-first { grid-column: 1 / -1; }
  .cm-app table.services-table.cm-stack-sm td[data-label]::before { display: none; }
  .cm-app table.services-table.cm-stack-sm td.cm-td-num { text-align: right !important; font-weight: 500; }
  .cm-app table.services-table.cm-stack-sm td.cm-num { font-size: 13px; color: var(--muted); padding-left: 44px; }
  .cm-app table.services-table.cm-stack-sm td.cm-num::before { display: inline !important; content: attr(data-label) " "; }
  .cm-app table.services-table.cm-stack-sm td:nth-child(2) { padding-left: 44px; }
  .cm-app table.services-table.cm-stack-sm .cm-row-actions { margin: 0; justify-content: flex-end; }
}
@media (max-width: 575.98px) { .cm-app table.services-table.cm-stack-sm td.cm-td-actions { text-align: right !important; justify-self: end; } }
.cm-app .cm-toggle.is-on { background: var(--primary) !important; }
.cm-app .cm-toggle-buy { display: inline; padding: 0 !important; background: none !important; border: 0 !important; color: var(--primary) !important; font-size: 13px; font-weight: 500; white-space: nowrap; }
.cm-app .cm-toggle-buy:hover { text-decoration: underline; }
/* Domain rows under sm: checkbox · name / status · expiry / two toggles / actions */
@media (max-width: 575.98px) {
  .cm-app table.domains-table.cm-stack-sm tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
  .cm-app table.domains-table.cm-stack-sm td { width: auto; padding: 0; }
  .cm-app table.domains-table.cm-stack-sm td.noncrucial { grid-column: 1; grid-row: 1; }
  .cm-app table.domains-table.cm-stack-sm td.cm-td-first { grid-column: 2 / 4; grid-row: 1; }
  .cm-app table.domains-table.cm-stack-sm td[data-label]::before { display: none; }
  .cm-app table.domains-table.cm-stack-sm td:nth-child(3) { grid-column: 2; }
  .cm-app table.domains-table.cm-stack-sm td:nth-child(5) { grid-column: 3; text-align: right !important; }
  .cm-app table.domains-table.cm-stack-sm td:nth-child(6), .cm-app table.domains-table.cm-stack-sm td:nth-child(7) { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
  .cm-app table.domains-table.cm-stack-sm td:nth-child(6) { grid-column: 2; }
  .cm-app table.domains-table.cm-stack-sm td:nth-child(7) { grid-column: 3; }
  .cm-app table.domains-table.cm-stack-sm td:nth-child(6)::before, .cm-app table.domains-table.cm-stack-sm td:nth-child(7)::before { display: inline !important; content: attr(data-label); }
  .cm-app table.domains-table.cm-stack-sm td.cm-td-actions { grid-column: 2 / 4; text-align: right !important; }
  .cm-app table.domains-table.cm-stack-sm .cm-expiry-note { font-size: 12px; }
}