/* Shared mainline UI, 06/11/2026. No workflow or permission changes. */
[hidden]{display:none!important}
:root{--header-height:64px;--safe-call-space:92px}
button:focus-visible,summary:focus-visible{outline:2px solid #1b6659;outline-offset:3px}
.task-column-menu button{white-space:normal;overflow-wrap:anywhere;min-width:0}
.task-column-menu button.primary{background:#1b6659;color:#fff;justify-content:center;text-align:center}
.task-column-menu button.primary:hover{background:#155347;color:#fff}
.task-column-menu:popover-open{max-width:min(340px,calc(100vw - 24px));max-height:min(360px,calc(100dvh - 100px))}
/* A floating action always has reserved space below scrollable content. */
.content,.hubhome-main,.hubhome-body,.global-admin main{padding-bottom:var(--safe-call-space)!important}
.hubhome{padding-bottom:var(--safe-call-space)}
.list-pager,.pagination,.table-pagination{padding-right:72px}
#phonefloat{width:48px!important;height:48px!important;bottom:18px!important;right:20px!important;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0}
#phonefloat>svg,.omi-phone-icon>svg{display:block;flex-shrink:0;margin:0}
.omi-phone-icon{display:inline-flex;align-items:center;justify-content:center;padding:0!important;line-height:0;box-sizing:border-box}
#phonefloat:disabled{opacity:.35;cursor:not-allowed}
#quickdial{width:310px;max-height:calc(100dvh - 120px);inset:auto 20px 78px auto!important}
#modal.ui-dialog{width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0 24px 22px;overflow:auto;overscroll-behavior:contain;scroll-padding:82px 0}
#modal.ui-dialog:has(.support-entry-form),#modal.ui-dialog:has(#server-new-contract),#modal.ui-dialog:has(#admin-correction-form){width:min(920px,calc(100vw - 32px))}
#modal.ui-dialog .ui-dialog-heading,#modal.ui-dialog>.entry-modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:6;background:#fff;border-bottom:1px solid #dce5df;padding:18px 0;margin:0 0 16px}
#modal.ui-dialog .ui-dialog-heading h2{margin:0;font-size:20px;line-height:1.35}
#modal.ui-dialog .ui-dialog-close{display:grid;place-items:center;width:32px;height:32px;flex:none;border:0;background:transparent;font-size:24px;padding:0;color:#667b76}
#modal.ui-dialog .ui-dialog-actions,#modal.ui-dialog .entry-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px;position:sticky;bottom:-22px;background:#fff;padding:14px 0 2px;margin-top:16px;border-top:1px solid #dce5df;z-index:5}
#modal.ui-dialog .ui-dialog-actions button.primary,#modal.ui-dialog .entry-actions button.primary{order:2}
#modal.ui-dialog .ui-dialog-actions button:not(.primary),#modal.ui-dialog .entry-actions button:not(.primary){order:1}
#modal.ui-dialog label{min-width:0}
#modal.ui-dialog input:not([type=checkbox]):not([type=radio]),#modal.ui-dialog select,#modal.ui-dialog textarea{max-width:100%}
#modal.ui-dialog .ui-contact-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 14px;align-items:start}
#modal.ui-dialog .ui-contact-row.ui-bank-row{grid-template-columns:repeat(2,minmax(0,1fr))}
#modal.ui-dialog .ui-contact-row label{margin:0;display:grid;gap:7px;font-size:13px}
#modal.ui-dialog .ui-contact-row label input{width:100%}
#modal.ui-dialog .ui-contact-row~.ui-contact-row{margin-top:0}
#modal.ui-dialog .formrow:empty,#modal.ui-dialog .fieldgrid:empty{display:none}
/* Compact directory rows use the task list's density, with room for long names. */
.directory-list-card table th,.directory-list-card table td,.org-layout table th,.org-layout table td{padding:7px 12px;font-size:13px;line-height:1.4}
.directory-list-card table .link,.org-layout table .link{padding:0;font-size:13px;white-space:normal;text-align:left}
.org-layout .task-action-menu summary{min-height:28px;padding:2px 8px}
.org-layout .card:has(table){min-width:0;overflow-x:auto}
.org-layout .toolbar,.directory-list-card .toolbar{gap:10px;margin:0 0 10px;align-items:end}
/* Shared header metrics in CRM, hub, administration and Contact Center. */
header.top,.modules.cc-breadcrumb{min-height:var(--header-height)!important;padding:10px 24px!important;box-sizing:border-box;font-size:13px}
header.top .session-identity b,.modules.cc-breadcrumb .session-identity b{font-size:13px!important;line-height:1.4}
header.top .session-identity small,.modules.cc-breadcrumb .session-identity small{font-size:11px!important;line-height:1.4}
header.top .session-controls,.modules.cc-breadcrumb .session-controls{gap:8px!important}
header.top .session-controls>button,.modules.cc-breadcrumb #cc-logout{font-size:12px!important;min-height:34px;padding:6px 10px!important}
.modules.cc-breadcrumb .cc-header-right{gap:12px}
.modules.cc-breadcrumb #cc-role{width:83px!important;height:38px;font-size:11px!important;padding:7px!important}
.modules.cc-breadcrumb .ui-cc-day{width:96px;height:38px;padding:7px;font-size:11px;border:1px solid #dce5df;border-radius:8px;color:#162e2c;background:#fff;opacity:1}
.modules.cc-breadcrumb .go-home .go-brand-name,.modules.cc-breadcrumb .crumb-label{font-size:13px!important}
.global-admin .content{padding-top:16px!important}
.global-admin .heading{margin-bottom:12px}
.global-admin .heading h1{font-size:26px!important;margin:3px 0!important}
.global-admin .ui-admin-help{margin:0 0 12px;color:#667b76;font-size:12px}
.global-admin .ui-admin-help summary{cursor:pointer;width:fit-content}
.global-admin .ui-admin-help p{margin:6px 0}
.admin-settings-tabs{gap:4px!important;margin:10px 0 16px!important;padding-bottom:10px!important}
.admin-settings-tabs button{font-size:13px!important;padding:8px 11px!important}
#report-tab-panel .toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;margin:0 0 14px}
#report-tab-panel .toolbar label{display:grid;gap:6px;min-width:0;font-size:13px}
#report-tab-panel .toolbar input,#report-tab-panel .toolbar select{width:100%}
#report-tab-panel+.card{margin-top:16px}
.calendar-entry .calendar-row-actions{display:flex;gap:6px;align-self:end;align-items:center}
.calendar-adjustment>[data-add-work],.calendar-adjustment>[data-add-rest]{border:0;background:transparent;font-size:24px;width:34px;height:34px;padding:0;color:#1b6659}
.calendar-entry .calendar-icon-button{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;width:30px;height:36px;font-size:23px;line-height:1}
.calendar-entry .calendar-icon-button:hover{color:#1b6659;background:#edf5ee!important}
.session-lock{min-height:calc(100dvh - 36px);display:grid;place-items:center;padding:32px 20px}
.session-lock>.card{width:min(560px,100%);padding:32px;margin:0}
.session-lock .brand{margin-bottom:24px!important}
.session-lock h1{font-size:26px;text-align:center;margin:0 0 16px}
.session-lock form label{display:grid;gap:8px;margin-bottom:16px;font-size:13px}
.session-lock form input,.session-lock form select{width:100%;box-sizing:border-box}
.session-lock form>.primary{width:100%;margin-top:0}
.session-lock>section>small{display:block;margin-top:14px;font-size:12px;line-height:1.5}
/* Keep the primary dial action visible at the audited laptop height. */
@media(min-width:701px) and (max-height:820px){
 #cc>.content{padding-top:18px}
 #cc .heading{margin-bottom:14px}
 #cc .dial{padding:18px}
 #cc .dialinput{margin:12px 0 4px}
 #cc .dialinput input{font-size:23px;padding:7px 0}
 #cc #match{min-height:24px}
 #cc .keys{gap:5px;margin:10px 8px}
 #cc .keys button{font-size:20px;padding:5px}
 #cc .keys small{line-height:10px}
 #cc .callbtn{margin-top:12px}
 #cc .testnote{margin-top:7px}
 #cc .call-history-card{height:calc(100dvh - 215px)}
}
@media(max-width:760px){
 #modal.ui-dialog .ui-contact-row{grid-template-columns:1fr}
 #modal.ui-dialog .ui-contact-row.ui-bank-row{grid-template-columns:1fr}
 #report-tab-panel .toolbar{grid-template-columns:1fr}
 header.top,.modules.cc-breadcrumb{padding:10px 14px!important}
 .modules.cc-breadcrumb{flex-wrap:wrap!important;gap:8px!important}
 .modules.cc-breadcrumb .cc-header-right{flex-wrap:wrap;gap:8px}
 .global-admin .content{padding:14px!important}
 .admin-settings-tabs{display:flex;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.hubchoices .adminchoice{margin-right:68px}
.ui-contact-row .ui-field-label .required{display:inline!important}
.report-filter-slot .toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;align-items:end}
.report-filter-slot .toolbar label{display:grid;gap:6px;font-size:13px;min-width:0}
.report-filter-slot .toolbar input,.report-filter-slot .toolbar select{width:100%}
@media(max-width:760px){.report-filter-slot .toolbar{grid-template-columns:1fr}.hubchoices .adminchoice{margin-right:54px}}

[data-report-form]>label{display:grid;gap:7px;font-size:13px;margin-bottom:16px}
[data-report-form]>label select{width:min(560px,100%)}
.report-filter-slot small{display:block;margin-top:8px}

/* Consistent call action: handset and short label centered as one group. */
#start.callbtn,#quickstart.callbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.4}
#start.callbtn svg,#quickstart.callbtn svg{width:20px;height:20px;display:block;flex:none;margin:0}

.premium-qr-content{text-align:center;padding:12px 0}.premium-qr-content .premium-qr-image{display:block;max-width:min(100%,320px);height:auto;margin:12px auto}.premium-qr-content .actions{justify-content:center}.premium-qr-content .button{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;text-decoration:none;background:#1b6659;color:#fff}

.premium-payment-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;margin-top:16px}.premium-payment-layout .payment-facts{margin:0;padding:16px;border:1px solid #dce5df;border-radius:10px;background:#f6f8f3}.premium-payment-layout .payment-facts>div+div{margin-top:14px}.premium-payment-layout .payment-facts small{display:block;color:#667b76;font-size:12px;margin-bottom:4px}.premium-payment-layout .payment-facts strong{display:block;overflow-wrap:anywhere;font-size:14px;line-height:1.5}.premium-payment-layout .premium-qr-content{padding:0}.premium-payment-layout .premium-qr-image{max-height:320px;object-fit:contain}.premium-payment-layout #premium-qr-status{font-size:12px;margin:0 0 8px}@media(max-width:580px){.premium-payment-layout{grid-template-columns:1fr}.premium-payment-layout .premium-qr-image{max-height:360px}}

.premium-subtask-actions{display:flex;gap:8px;margin-top:14px}.premium-subtask-actions>.premium-subtask{width:auto;flex:1;min-width:0;margin:0;padding:10px 12px;justify-content:center;gap:8px;font-size:13px;line-height:1.4}.premium-subtask-actions svg{flex:none;display:block}.premium-payment-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}.premium-payment-inputs label{margin:0!important}.premium-payment-inputs select,.premium-payment-inputs input{width:100%;margin-top:6px}.premium-payment-inputs small{display:block;font-size:11px;color:#667b76;line-height:1.4;margin-top:5px}@media(max-width:540px){.premium-payment-inputs{grid-template-columns:1fr;gap:10px}.premium-subtask-actions>.premium-subtask{padding:9px 8px;font-size:12px}}

/* Per-contract D55/D60 control; overdue review stays independent. */
.contract-reminder-setting{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid #e2eae5;font-size:14px}
.contract-reminder-setting>small{flex-basis:100%;color:#657c77;font-size:12px;line-height:1.5}
.contract-reminder-toggle{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #ccd9d1;border-radius:18px;background:#f4f6f4;color:#52665d;min-height:32px;font-size:12px;white-space:nowrap}
.contract-reminder-toggle:before{content:'';width:8px;height:8px;border-radius:50%;background:#89978e}
.contract-reminder-toggle[aria-checked=true]{background:#e8f2e8;color:#195c48;border-color:#bfd5c5}.contract-reminder-toggle[aria-checked=true]:before{background:#21745d}

#mainline-request-status{position:fixed;bottom:18px;left:18px;z-index:30000;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #d6e2da;border-radius:8px;background:#fff;color:#1b6659;box-shadow:0 3px 12px #163e3612;font:12px/1.4 system-ui;pointer-events:none}
#mainline-request-status[hidden]{display:none}
#mainline-request-status:before{content:'';width:12px;height:12px;border:2px solid #d6e2da;border-top-color:#1b6659;border-radius:50%;animation:mainline-request-spin .8s linear infinite}
@keyframes mainline-request-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#mainline-request-status:before{animation:none}}

/* DEC-284: the shared live header has no prototype date/role controls or banners. */
.header-field:has([aria-label="Ngày mô phỏng"]),
.header-field:has([aria-label="Vai trò mô phỏng"]),
[aria-label="Ngày mô phỏng"],
[aria-label="Vai trò mô phỏng"],
#cc-role,.ui-cc-day,
.ribbon,.hub-preview-label,.hubhome-footer,
.content>.notice.compact{display:none!important}
/* The CRM frame fills the space formerly reserved for the prototype ribbon. */
#crm{height:100dvh!important}