/* Customs Clearance 360 -- Customs File workspace. Mobile-first, RTL-safe (logical properties), light + dark through design-system tokens only.
   Deliberately mirrors masar360-trip-file.css's proven .tf-* structure under a .cf-* prefix so the two workspaces feel like one product. */
.cf{--cf-sticky-top:0px;max-width:100%;overflow-x:hidden;color:var(--ds-text)}
.cf *{min-width:0;overflow-wrap:anywhere;box-sizing:border-box}
.cf-stack{display:flex;flex-direction:column;gap:var(--ds-space-3);margin-block-start:var(--ds-space-3)}

/* sticky smart header + next action */
.cf-head{position:sticky;top:var(--cf-sticky-top);z-index:15;background:var(--ds-surface);border:var(--ds-border-w) solid var(--ds-border-subtle);border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-card);padding:var(--ds-space-3);margin-block-end:var(--ds-space-3)}
.cf-head-top{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-3)}
.cf-head-id{flex:1 1 auto}
.cf-no{margin:0;font-size:var(--ds-fs-section-title);font-weight:var(--ds-fw-bold)}
.cf-chips{display:flex;flex-wrap:wrap;gap:var(--ds-space-1);margin-block-start:var(--ds-space-1)}
.cf-next{flex:0 0 auto;min-height:var(--ds-touch-min);max-width:48%;white-space:normal;line-height:1.25}
.cf-route{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);align-items:center;margin-block-start:var(--ds-space-2);font-size:var(--ds-fs-secondary);color:var(--ds-text-muted)}
.cf-head-more{margin-block-start:var(--ds-space-2)}
.cf-head-more>summary{cursor:pointer;font-size:var(--ds-fs-label);color:var(--ds-text-muted);min-height:32px;display:flex;align-items:center}
.cf-blocker{margin-block-start:var(--ds-space-2);padding:var(--ds-space-2) var(--ds-space-3);border-radius:var(--ds-radius-md);background:var(--ds-danger-bg);color:var(--ds-danger);font-size:var(--ds-fs-secondary)}

/* stepper: compact bar on phones, full list from tablet up (never horizontal-scrolls) */
.cf-steps{margin-block-end:var(--ds-space-2)}
.cf-steps-compact{font-size:var(--ds-fs-secondary);padding:var(--ds-space-2) var(--ds-space-3);background:var(--ds-surface);border:var(--ds-border-w) solid var(--ds-border-subtle);border-radius:var(--ds-radius-md)}
.cf-bar{height:6px;border-radius:99px;background:var(--ds-border-subtle);margin-block-start:var(--ds-space-2);overflow:hidden}
.cf-bar>i{display:block;height:100%;background:var(--ds-primary);border-radius:99px}
.cf-steps-full{display:none;list-style:none;margin:0;padding:0;gap:var(--ds-space-2);flex-wrap:wrap}
.cf-steps-full li{display:flex;align-items:center;gap:var(--ds-space-1);font-size:var(--ds-fs-caption);color:var(--ds-text-muted);padding:2px 8px;border-radius:99px;border:var(--ds-border-w) solid var(--ds-border-subtle);background:var(--ds-surface)}
.cf-steps-full li.is-done{color:var(--ds-success)}
.cf-steps-full li.is-cur{color:var(--ds-primary);border-color:var(--ds-primary);font-weight:var(--ds-fw-bold);background:var(--ds-primary-soft,var(--ds-info-bg))}
.cf-steps-full li.is-byp{border-style:dashed}
.cf-dot{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ds-border-subtle);font-size:var(--fs-helper)}
@media (min-width:720px){.cf-steps-compact{display:none}.cf-steps-full{display:flex}.cf-next{max-width:none}}

/* collapsible sections (the 17-section shell) */
.cf-sec{background:var(--ds-surface);border:var(--ds-border-w) solid var(--ds-border-subtle);border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-card)}
.cf-sec[open]{border-color:var(--ds-border)}
.cf-sec-sum{display:flex;align-items:center;gap:var(--ds-space-2);min-height:var(--ds-touch-min);padding:var(--ds-space-2) var(--ds-space-3);cursor:pointer;list-style:none}
.cf-sec-sum::-webkit-details-marker{display:none}
.cf-sec-sum::before{content:"\25B8";color:var(--ds-text-muted);transition:transform var(--ds-dur-fast,120ms)}
.cf-sec[open]>.cf-sec-sum::before{transform:rotate(90deg)}
[dir="rtl"] .cf-sec-sum::before,:root[dir="rtl"] .cf-sec-sum::before{content:"\25C2"}
[dir="rtl"] .cf-sec[open]>.cf-sec-sum::before{transform:rotate(-90deg)}
.cf-sec-title{font-weight:var(--ds-fw-semibold);font-size:var(--ds-fs-card-title);flex:0 0 auto}
.cf-sec-brief{flex:1 1 auto;color:var(--ds-text-muted);font-size:var(--ds-fs-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-sec-body{padding:var(--ds-space-2) var(--ds-space-3) var(--ds-space-4)}
.cf-flash{outline:2px solid var(--ds-primary);outline-offset:2px}
.cf-inner{margin-block-start:var(--ds-space-3)}
.cf-inner>summary{cursor:pointer;color:var(--ds-primary);font-size:var(--ds-fs-secondary);min-height:36px;display:flex;align-items:center}
.cf-placeholder{color:var(--ds-text-muted);font-size:var(--ds-fs-secondary);padding:var(--ds-space-2) 0}

/* content atoms */
.cf-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ds-space-2) var(--ds-space-4);margin:0}
@media (min-width:560px){.cf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.cf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cf-kv{display:flex;flex-direction:column;gap:2px;margin:0}
.cf-kv dt{font-size:var(--ds-fs-caption);color:var(--ds-text-muted)}
.cf-kv dd{margin:0;font-size:var(--ds-fs-body)}
.cf-dim{color:var(--ds-text-muted)}
.cf-empty{margin:0}
.cf-good{color:var(--ds-success)}.cf-bad{color:var(--ds-danger)}
.cf-lead{margin:0 0 var(--ds-space-3);font-size:var(--ds-fs-body)}
.cf-h5{margin:var(--ds-space-3) 0 var(--ds-space-2);font-size:var(--ds-fs-label);color:var(--ds-text-muted);font-weight:var(--ds-fw-semibold)}
.cf-row{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);margin-block-start:var(--ds-space-3)}
.cf-row>.cf-btn{flex:1 1 auto;min-height:var(--ds-touch-min)}
@media (min-width:720px){.cf-row>.cf-btn{flex:0 0 auto}}
.cf-link{background:none;border:0;padding:0 4px;color:var(--ds-primary);cursor:pointer;text-decoration:underline;font:inherit;font-size:var(--ds-fs-secondary);min-height:32px}
.cf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-space-2)}
.cf-blk,.cf-okrow{display:flex;align-items:center;gap:var(--ds-space-2);flex-wrap:wrap;padding:var(--ds-space-2);border-radius:var(--ds-radius-md);background:var(--ds-hover)}
.cf-blk-t{flex:1 1 160px}
.cf-note{padding:var(--ds-space-2) var(--ds-space-3);border-radius:var(--ds-radius-md);background:var(--ds-info-bg);font-size:var(--ds-fs-secondary);margin-block-end:var(--ds-space-2)}
.cf-warn{background:var(--ds-warning-bg);color:var(--ds-warning)}
.cf-scroll{overflow-x:auto;max-width:100%}
.cf-table{width:100%;border-collapse:collapse;font-size:var(--ds-fs-secondary)}
.cf-table th,.cf-table td{padding:6px 8px;text-align:start;border-block-end:var(--ds-border-w) solid var(--ds-border-subtle);white-space:nowrap}
.cf-tl{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--ds-border-subtle)}
.cf-tl-i{padding:var(--ds-space-1) var(--ds-space-3);display:flex;flex-direction:column;font-size:var(--ds-fs-secondary)}
.cf-tl-i time{font-size:var(--ds-fs-caption);color:var(--ds-text-muted)}
.cf-tl-i.is-bad{border-inline-start:3px solid var(--ds-danger);margin-inline-start:-2px}
.cf-tl-i.is-warn{border-inline-start:3px solid var(--ds-warning);margin-inline-start:-2px}
.cf-inline-error{margin:var(--ds-space-2) var(--ds-space-4);padding:var(--ds-space-2) var(--ds-space-3);border-radius:var(--ds-radius-md);background:var(--ds-danger-bg);color:var(--ds-danger);font-size:var(--ds-fs-secondary)}
@media (max-width:430px){.cf-head-top{align-items:flex-start}.cf-sec-brief{display:none}}
@media (prefers-reduced-motion:reduce){.cf-sec-sum::before{transition:none}}

/* loading / error / empty states (self-contained -- Customs 360 is a standalone top-level module and must not depend on masar360-transport.css) */
.cf-state{display:flex;align-items:center;gap:var(--ds-space-3);justify-content:center;flex-wrap:wrap;padding:var(--ds-space-8) var(--ds-space-4);text-align:center;color:var(--ds-text-muted)}
.cf-spinner{width:18px;height:18px;border:2px solid var(--ds-border-subtle);border-top-color:var(--ds-primary);border-radius:50%;animation:cf-spin .8s linear infinite}
@keyframes cf-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cf-spinner{animation:none}}

/* list screen */
.cfl-toolbar{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);align-items:center;justify-content:space-between;margin-block-end:var(--ds-space-3)}
.cfl-search{flex:1 1 220px}
.cfl-search input{width:100%}
.cfl-card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:var(--ds-space-3)}
.cfl-card{display:flex;flex-direction:column;gap:var(--ds-space-2);padding:var(--ds-space-3)}
.cfl-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-2)}

/* modal/form utility classes (self-contained -- do not reuse masar360-transport.css's tp-form/tp-grid/tp-choice/tp-check: this module must
   work whether or not the Fleet & Transport 360 module is enabled for the tenant) */
.cf-form{display:flex;flex-direction:column;gap:var(--ds-space-3)}
.cf-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-3)}
@media (max-width:560px){.cf-fgrid{grid-template-columns:minmax(0,1fr)}}
.cf-choice{display:flex;flex-direction:column;gap:var(--ds-space-2);margin-block-end:var(--ds-space-3)}
.cf-choice label{display:flex;gap:var(--ds-space-2);align-items:center;min-height:var(--ds-touch-min)}
.cf-check{display:inline-flex;gap:8px;align-items:center;font-size:var(--ds-fs-body);min-height:32px;cursor:pointer}