/* directory.css — directory pages in the NEW home UI. Prefix "dr-".
   REPLACE the whole file (remove the old rules and the earlier "additions" block).
   Uses home.css tokens: --navy --blue --cyan --teal --ink --muted --line --bg --shadow --maxw.
   Table/card chrome reuses home.css classes: .recent-wrap .recent-head .recent-table .status-pill .final-box .btn */

.dr-page{color:var(--ink)}
.dr-page *,.dr-page *::before,.dr-page *::after{box-sizing:border-box}
.dr-page a{text-decoration:none}
.dr-wrap{width:min(var(--maxw),92vw);margin:0 auto}

/* ---------- Hero (same look as home hero) ---------- */
.dr-hero{position:relative;overflow:hidden;background:linear-gradient(145deg,#071038 0%,#0b1c59 62%,#0b235f 100%);color:#fff;padding:56px 0 60px}
.dr-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
 background-image:radial-gradient(circle at 72% 22%,rgba(53,200,255,.16),transparent 26%),radial-gradient(circle at 90% 75%,rgba(66,225,195,.10),transparent 28%),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
 background-size:auto,auto,42px 42px,42px 42px;mask-image:linear-gradient(to bottom,black,rgba(0,0,0,.35))}
.dr-hero .dr-wrap{position:relative}
.dr-crumbs{font-size:13px;color:#91a2ca;margin-bottom:18px}
.dr-crumbs a{color:#cbd5f0;font-size:13px;font-weight:600}
.dr-crumbs a:hover{color:var(--teal)}
.dr-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.dr-eyebrow::before{content:"";width:22px;height:1px;background:currentColor}
.dr-hero h1{font-size:clamp(32px,4.4vw,52px);line-height:1.05;letter-spacing:-.045em;color:#fff;margin-bottom:14px}
.dr-lede{font-size:17px;color:#cbd5f0;max-width:680px;margin:0}

/* ---------- Index pages: layout ---------- */
.dr-main{background:var(--bg);padding:48px 0 72px}
.dr-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}

.dr-side{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;position:sticky;top:116px;box-shadow:0 8px 30px rgba(26,42,84,.04)}
.dr-side-head{padding:14px 20px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:var(--bg);border-bottom:1px solid var(--line)}
.dr-search{position:relative;padding:16px}
.dr-search i{position:absolute;left:32px;top:50%;transform:translateY(-50%);color:var(--muted)}
.dr-search input{width:100%;background:#F7F8FC;border:1.5px solid #EEEFF6;border-radius:999px;padding:12px 16px 12px 42px;font:inherit;font-size:14px;color:var(--ink);outline:none}
.dr-search input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(47,103,255,.12)}
.dr-side-list{list-style:none;margin:0;padding:6px 0;max-height:420px;overflow-y:auto;scrollbar-width:thin;border-top:1px solid var(--line)}
.dr-side-list a{display:block;padding:10px 20px;font-size:14px;font-weight:500;color:#38425e;border-left:3px solid transparent}
.dr-side-list a:hover{background:#f5f8ff;color:var(--blue);border-left-color:var(--blue)}

/* status category filter */
.dr-cats{list-style:none;margin:0;padding:10px}
.dr-cat{width:100%;display:flex;align-items:center;gap:12px;border:1px solid transparent;background:transparent;border-radius:14px;padding:11px 12px;font:inherit;font-size:14px;font-weight:500;color:#38425e;cursor:pointer;text-align:left;transition:.2s}
.dr-cat i{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#edf4ff;font-size:14px;color:var(--blue)}
.dr-cat span{flex:1}
.dr-cat em{font-style:normal;min-width:30px;height:28px;padding:0 8px;display:grid;place-items:center;border-radius:999px;background:#eef1f8;color:var(--muted);font-size:12px;font-weight:800}
.dr-cat:hover{background:#f5f8ff}
.dr-cat.active{background:#f5f8ff;border-color:#b6ccff;color:var(--ink);font-weight:700;box-shadow:0 8px 28px rgba(47,103,255,.08)}
.dr-cat.active em{background:var(--navy);color:#fff}

/* toolbar */
.dr-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.dr-count{color:var(--muted);font-size:14.5px;font-weight:500}
.dr-count b{color:var(--ink)}
.dr-toggle{display:inline-flex;background:#F0F1F8;border-radius:999px;padding:4px}
.dr-toggle button{border:none;background:transparent;padding:9px 22px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer}
.dr-toggle button.active{background:var(--navy);color:#fff}

/* cards */
.dr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dr-card{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;color:var(--ink);box-shadow:0 8px 30px rgba(26,42,84,.04);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.dr-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#b6ccff}
.dr-code{display:inline-grid;place-items:center;align-self:flex-start;min-width:46px;height:46px;padding:0 10px;border-radius:13px;background:#edf4ff;color:var(--blue);font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:16px}
.dr-info h3{font-size:17px;line-height:1.3;letter-spacing:-.01em}
.dr-info p{margin:4px 0 0;font-size:13px;color:var(--muted);font-weight:500}
.dr-see{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--navy);color:#fff;border-radius:999px;padding:9px 18px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;transition:background .2s}
.dr-card:hover .dr-see{background:linear-gradient(135deg,var(--blue),#1da8ff)}

/* status cards */
.dr-card--status{position:relative;padding:24px}
.dr-card--status h3{font-size:16.5px;line-height:1.35;padding-right:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.dr-dot{position:absolute;top:18px;right:18px;width:9px;height:9px;border-radius:50%;background:#c9cfdc}
.dr-dot--green{background:var(--teal);box-shadow:0 0 0 4px rgba(66,225,195,.18)}
.dr-dot--red{background:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.12)}
.dr-dot--grey{background:#c9cfdc}
.dr-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dr-num b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:19px;line-height:1.1;color:var(--ink)}
.dr-num small{font-size:12px;color:var(--muted);font-weight:500}
.dr-card--status .dr-see{margin:0}

/* list view */
.dr-grid.is-list{grid-template-columns:1fr;gap:10px}
.dr-grid.is-list .dr-card{flex-direction:row;align-items:center;gap:16px;padding:14px 20px}
.dr-grid.is-list .dr-info{flex:1}
.dr-grid.is-list .dr-see{margin:0;align-self:center}
.dr-grid.is-list .dr-card--status h3{border:0;padding:0;flex:1}
.dr-grid.is-list .dr-card-foot{margin:0;gap:24px}

.dr-empty{display:none;text-align:center;color:var(--muted);padding:34px;background:#fff;border:1px dashed #cfd6e6;border-radius:22px;margin-top:16px}

/* CTA — uses home .final-box */
.dr-cta{padding:0 0 88px;background:var(--bg)}
.dr-cta .final-box{padding:52px 34px}

/* ---------- Company table pages ---------- */
.dr-cl{padding:44px 0 80px;background:var(--bg)}
.dr-cl-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.dr-cl .recent-wrap{margin-top:0}
.dr-cl .recent-head b{font-size:17px}
.dr-notice{background:#fff4f2;border-left:4px solid #ef5b5b;color:#c62828;padding:16px 22px;font-size:14px;font-weight:500}
.dr-notice a{color:var(--blue);font-size:14px;font-weight:700}
.dr-msg{padding:48px 22px;text-align:center;color:var(--muted);font-size:14px}
.dr-table-wrap{overflow-x:auto}
.dr-cl .recent-table{min-width:760px}
.dr-cl .recent-table td{vertical-align:top;color:#38425e}
.dr-cl .recent-table td a{font-size:14px}
.dr-cl .recent-table .cname{color:var(--ink);font-weight:600}
.dr-cl .recent-table .cname:hover{color:var(--blue)}
.dr-cl .recent-table .cin{color:var(--blue);font-weight:600;font-size:13px;letter-spacing:.01em}
.dr-cl .recent-table .cin:hover{text-decoration:underline}
.dr-cl .recent-table .addr{color:var(--muted);font-size:13px;line-height:1.5}
.dr-pager{display:flex;align-items:center;justify-content:center;gap:16px;padding:20px 22px;background:#fafcff;border-top:1px solid var(--line);font-size:13px;color:var(--muted);font-weight:600}
.dr-pager a,.dr-pager .is-off{padding:9px 18px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:700}
.dr-pager a{background:#fff;color:var(--navy)}
.dr-pager a:hover{border-color:var(--blue);color:var(--blue)}
.dr-pager .is-off{color:#b4bbcc;background:#f3f5fa}

/* side stats card (same look as the home product panel) */
.dr-aside{background:linear-gradient(155deg,#0a1643,#0d276b);color:#fff;border-radius:28px;padding:26px;box-shadow:0 24px 60px rgba(10,25,70,.18);position:sticky;top:116px}
.dr-aside h2{font-size:18px;color:#fff;margin-bottom:16px}
.dr-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:16px;margin-bottom:12px}
.dr-stat span{font-size:12.5px;color:#91a3cf;font-weight:500}
.dr-stat b{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;color:#fff}
.dr-aside .btn{width:100%;margin-top:8px}

@media(max-width:1100px){.dr-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.dr-cl-layout{grid-template-columns:1fr}.dr-aside{position:relative;top:0}}
@media(max-width:900px){
 .dr-layout{grid-template-columns:1fr}.dr-side{position:relative;top:0}.dr-side-list{max-height:220px}
 .dr-hero{padding:40px 0 44px}
}
@media(max-width:560px){.dr-grid{grid-template-columns:1fr}.dr-cta .final-box{padding:40px 20px}}

/* masked sample rows */
.dr-cl .recent-table tr.is-masked td,
.dr-cl .recent-table tr.is-masked .cin,
.dr-cl .recent-table tr.is-masked .cname,
.dr-cl .recent-table tr.is-masked .addr{color:#8a93a6;font-weight:500}
.dr-cl .recent-table tr.is-masked .bi{color:#b4bbcc}