/* Phase 33 — layout normalization, native-workspace cleanup and stable readable rhythm. */
body[data-theme="clarity-pro"]{
  --p33-gap:12px;--p33-gap-lg:16px;--p33-soft:#f7f9fb;--p33-line:#e4e9ee;
}
/* Remove the old one-sided thick accent language. Use small badges/icons for semantic color instead. */
body[data-theme="clarity-pro"] .page-head>div:first-child{padding-left:0!important}
body[data-theme="clarity-pro"] .page-head>div:first-child:before{display:none!important}
body[data-theme="clarity-pro"] .page-head,
body[data-theme="clarity-pro"] .section-box,
body[data-theme="clarity-pro"] .approval-card,
body[data-theme="clarity-pro"] .balance-card{border-left-width:1px!important}
body[data-theme="clarity-pro"] .balance-card:before{display:none!important}

/* Predictable vertical rhythm: neither giant empty islands nor cramped stacks. */
body[data-theme="clarity-pro"] .main{padding-top:22px!important;padding-bottom:42px!important}
body[data-theme="clarity-pro"] .page-head{min-height:0!important;margin-bottom:14px!important;gap:14px!important}
body[data-theme="clarity-pro"] .card,
body[data-theme="clarity-pro"] .module-card,
body[data-theme="clarity-pro"] .section-box{margin-bottom:14px}
body[data-theme="clarity-pro"] .card:last-child,
body[data-theme="clarity-pro"] .section-box:last-child{margin-bottom:0}
body[data-theme="clarity-pro"] .card-head{padding:13px 15px 11px!important}
body[data-theme="clarity-pro"] .card-body{padding:14px 15px!important}
body[data-theme="clarity-pro"] .grid2,
body[data-theme="clarity-pro"] .grid3,
body[data-theme="clarity-pro"] .form-grid,
body[data-theme="clarity-pro"] .stats,
body[data-theme="clarity-pro"] .quick-grid{gap:12px!important}
body[data-theme="clarity-pro"] .empty{padding:28px 16px!important}
body[data-theme="clarity-pro"] .section-box{padding:14px!important;background:#fff!important}

/* Text must wrap by words, not visually shatter into fragments. */
body[data-theme="clarity-pro"] .card,
body[data-theme="clarity-pro"] .module-card,
body[data-theme="clarity-pro"] .form-group,
body[data-theme="clarity-pro"] .activity-item,
body[data-theme="clarity-pro"] .approval-card,
body[data-theme="clarity-pro"] td,
body[data-theme="clarity-pro"] th{min-width:0}
body[data-theme="clarity-pro"] .card-title,
body[data-theme="clarity-pro"] .card-sub,
body[data-theme="clarity-pro"] .section-title,
body[data-theme="clarity-pro"] .section-help,
body[data-theme="clarity-pro"] .page-desc,
body[data-theme="clarity-pro"] .cell-title,
body[data-theme="clarity-pro"] .cell-sub,
body[data-theme="clarity-pro"] td{overflow-wrap:break-word;word-break:normal}
body[data-theme="clarity-pro"] .btn,
body[data-theme="clarity-pro"] .badge,
body[data-theme="clarity-pro"] .nav-btn{word-break:normal}
body[data-theme="clarity-pro"] .head-actions{max-width:min(100%,680px);justify-content:flex-end}

/* Subtle semantic grouping without thick side borders. */
body[data-theme="clarity-pro"] .section-title{display:flex;align-items:center;gap:7px;color:#263444!important}
body[data-theme="clarity-pro"] .section-title:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--op-accent,var(--cp-primary));flex:0 0 auto;box-shadow:0 0 0 4px color-mix(in srgb,var(--op-accent,var(--cp-primary)) 10%,transparent)}
@supports not (background:color-mix(in srgb,#000 10%,transparent)){
 body[data-theme="clarity-pro"] .section-title:before{box-shadow:0 0 0 4px #edf7f5}
}

/* Native workspace: use the main ERP shell, no nested scrollbar/padding/header. */
body[data-theme="clarity-pro"].page-workspace .native-workspace-fragment{min-width:0;width:100%;animation:p33NativeIn .16s ease-out both}
body[data-theme="clarity-pro"].page-workspace .native-workspace-fragment>.topbar{display:none!important}
body[data-theme="clarity-pro"].page-workspace .native-module-main{padding:0!important;margin:0!important;max-width:none!important;overflow:visible!important}
body[data-theme="clarity-pro"].page-workspace .native-workspace-executive_cockpit .xec-shell{max-width:none!important;padding:0!important;margin:0!important}
body[data-theme="clarity-pro"].page-workspace .native-workspace-executive_cockpit .xec-hero{border-radius:14px!important}
body[data-theme="clarity-pro"].page-workspace .native-workspace-executive_cockpit .xec-card{border-radius:10px!important;box-shadow:0 2px 8px rgba(15,23,42,.035)!important}
body[data-theme="clarity-pro"].page-workspace .native-workspace-executive_cockpit .xec-grid{gap:12px!important}
body[data-theme="clarity-pro"].page-workspace .attendance-native-main>.card:first-child{margin-top:0}

/* Legacy iframe modules are intentionally frameless until they are converted natively. */
body[data-theme="clarity-pro"] .workspace-frame-legacy{border:0!important;border-radius:10px!important;box-shadow:none!important;background:#f7f9fb!important;height:calc(100vh - 170px)!important;min-height:600px!important}
body[data-theme="clarity-pro"] .workspace-frame-legacy .workspace-frame{background:#f7f9fb!important}

/* Avoid false whitespace from fixed minimums on ordinary cards while preserving charts/canvases. */
body[data-theme="clarity-pro"] .module-card:not(.chart-card),
body[data-theme="clarity-pro"] .card:not(.cd-chart-card):not(.xec-chart){min-height:0!important}

/* Clean action wrapping on medium widths. */
@media(max-width:1080px){
 body[data-theme="clarity-pro"] .head-actions{width:100%;justify-content:flex-start}
 body[data-theme="clarity-pro"] .head-actions .btn{flex:0 1 auto}
}
@media(max-width:720px){
 body[data-theme="clarity-pro"] .main{padding:14px 10px 76px!important}
 body[data-theme="clarity-pro"] .page-head{gap:9px!important;margin-bottom:11px!important}
 body[data-theme="clarity-pro"] .card,body[data-theme="clarity-pro"] .module-card,body[data-theme="clarity-pro"] .section-box{margin-bottom:10px}
 body[data-theme="clarity-pro"] .workspace-frame-legacy{height:calc(100vh - 155px)!important;min-height:520px!important}
}
@keyframes p33NativeIn{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body[data-theme="clarity-pro"].page-workspace .native-workspace-fragment{animation:none!important}}
/* Remove leftover thick top/side strokes from legacy module cards and safety panels. */
body[data-theme="clarity-pro"] .module-card{border-top-width:1px!important}
body[data-theme="clarity-pro"] .correction-safety{border-left-width:1px!important}
body[data-theme="clarity-pro"] .notice-strip .text{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.45}
body[data-theme="clarity-pro"] .notice-strip{align-items:flex-start!important}
body[data-theme="clarity-pro"] .alert.success{background:#edf9f3!important;border-color:#cdebdc!important;color:#176b4b!important}
body[data-theme="clarity-pro"] .alert.error{background:#fff1f1!important;border-color:#f2d2d2!important;color:#9f2d2d!important}
body[data-theme="clarity-pro"] .alert.warning{background:#fff8e8!important;border-color:#f3dfae!important;color:#8a5b10!important}
body[data-theme="clarity-pro"] .assist{background:#f1f8f7!important;border-color:#dcebe8!important;color:#365a55!important}