/* DALON Tools visual theme — industrial blue-teal, aligned with the public shell.
   Layout/shell: public-shell.css (header, drawer, footer) + tools-shell.css (structure).
   This file only paints the tool pages: nav bar, cards, controls, tables. */

body.dalon-tools{
  --tool-brand:#0f5c7a;          /* primary: steel blue */
  --tool-brand-dark:#0b4a63;
  --tool-accent:#0e7c86;         /* secondary: teal */
  --tool-accent-dark:#0b6470;
  --tool-ink:#16232b;
  --tool-muted:#4a5c66;
  --tool-line:#d5dee3;
  --tool-soft:#f4f7f8;
  --tool-soft-2:#eef4f6;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--tool-ink);
}

/* ---------- page frame ---------- */
.dalon-tools .tools-container{max-width:1200px;width:100%;margin:0 auto;padding:28px 24px 56px;box-sizing:border-box}
.dalon-tools .tools-main{min-height:40vh}
.dalon-tools h1,.dalon-tools h2,.dalon-tools h3,.dalon-tools h4{color:var(--tool-ink);letter-spacing:-.01em}
.dalon-tools h1{font-weight:700}
.dalon-tools h2{font-weight:650}
.dalon-tools a{color:var(--tool-brand)}
.dalon-tools a:hover{color:var(--tool-accent-dark)}

/* ---------- tool category bar ---------- */
.dalon-tools .tools-nav{background:white;border-top:1px solid var(--tool-line);border-bottom:1px solid var(--tool-line)}
.dalon-tools .tools-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.dalon-tools .tools-nav-list{display:flex;align-items:stretch;gap:2px;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.dalon-tools .tools-nav-list>li{display:flex}
.dalon-tools .tools-nav-link{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:8px 14px;color:var(--tool-ink);text-decoration:none;font-weight:550;font-size:15px;white-space:nowrap;border-bottom:3px solid transparent;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.dalon-tools .tools-nav-link i{color:var(--tool-muted);font-size:14px}
.dalon-tools .tools-nav-link:hover{background:var(--tool-soft);color:var(--tool-brand)}
.dalon-tools .tools-nav-link:hover i{color:var(--tool-brand)}
.dalon-tools .tools-nav-link.is-active{color:var(--tool-brand);border-bottom-color:var(--tool-accent);font-weight:650}
.dalon-tools .tools-nav-link.is-active i{color:var(--tool-accent)}
.dalon-tools .tools-lang{display:flex;align-items:center;gap:2px;flex-wrap:wrap;font-size:13px;font-weight:650;letter-spacing:.02em}
.dalon-tools .tools-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:6px 8px;color:var(--tool-muted);text-decoration:none;border-radius:4px}
.dalon-tools .tools-lang a:hover{background:var(--tool-soft);color:var(--tool-brand)}
.dalon-tools .tools-lang a.is-active{background:var(--tool-brand);color:white}

/* ---------- cards (INSPINIA ibox / bootstrap card) ---------- */
.dalon-tools .ibox{background:white;margin-bottom:24px}
.dalon-tools .ibox-title{border-top:3px solid var(--tool-accent);background:var(--tool-soft-2);color:var(--tool-ink);padding:14px 20px;border-bottom:1px solid var(--tool-line);min-height:52px;display:flex;align-items:center}
.dalon-tools .ibox-title h5{margin:0;font-size:16px;font-weight:650;color:var(--tool-ink)}
.dalon-tools .ibox-content{background:white;color:var(--tool-ink);padding:24px;border:none}
.dalon-tools .card{border-color:var(--tool-line);background:white}
.dalon-tools .card-header{background:var(--tool-soft-2);border-bottom:1px solid var(--tool-line);border-top:3px solid var(--tool-accent);color:var(--tool-ink);font-weight:650}
.dalon-tools hr{border-color:var(--tool-line);opacity:1}

/* ---------- buttons ---------- */
.dalon-tools .btn{border-radius:4px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px}
.dalon-tools .btn-primary{--bs-btn-bg:var(--tool-brand);--bs-btn-border-color:var(--tool-brand);--bs-btn-hover-bg:var(--tool-brand-dark);--bs-btn-hover-border-color:var(--tool-brand-dark);--bs-btn-active-bg:var(--tool-brand-dark);--bs-btn-active-border-color:var(--tool-brand-dark);--bs-btn-disabled-bg:var(--tool-brand);--bs-btn-disabled-border-color:var(--tool-brand);background-color:var(--tool-brand);border-color:var(--tool-brand);color:white}
.dalon-tools .btn-success{--bs-btn-bg:var(--tool-accent);--bs-btn-border-color:var(--tool-accent);--bs-btn-hover-bg:var(--tool-accent-dark);--bs-btn-hover-border-color:var(--tool-accent-dark);--bs-btn-active-bg:var(--tool-accent-dark);--bs-btn-active-border-color:var(--tool-accent-dark);background-color:var(--tool-accent);border-color:var(--tool-accent);color:white}
.dalon-tools .btn-info{--bs-btn-bg:var(--tool-brand);--bs-btn-border-color:var(--tool-brand);--bs-btn-hover-bg:var(--tool-brand-dark);--bs-btn-hover-border-color:var(--tool-brand-dark);background-color:var(--tool-brand);border-color:var(--tool-brand);color:white}
.dalon-tools .btn-outline-primary{--bs-btn-color:var(--tool-brand);--bs-btn-border-color:var(--tool-brand);--bs-btn-hover-bg:var(--tool-brand);--bs-btn-hover-border-color:var(--tool-brand);--bs-btn-active-bg:var(--tool-brand-dark);--bs-btn-active-border-color:var(--tool-brand-dark);color:var(--tool-brand);border-color:var(--tool-brand);border-width:1px}
.dalon-tools .btn-default,.dalon-tools .btn-white,.dalon-tools .btn-secondary{background:white;border:1px solid var(--tool-line);color:var(--tool-ink)}
.dalon-tools .btn-default:hover,.dalon-tools .btn-white:hover,.dalon-tools .btn-secondary:hover{border-color:var(--tool-brand);color:var(--tool-brand);background:white}
.dalon-tools .btn-link{color:var(--tool-brand);text-decoration:underline;text-underline-offset:4px;padding-left:0;padding-right:0}

/* ---------- forms ---------- */
.dalon-tools .form-control,.dalon-tools .form-select{border:1px solid var(--tool-line);border-radius:4px;color:var(--tool-ink);background:white}
.dalon-tools .form-control:focus,.dalon-tools .form-select:focus{border-color:var(--tool-accent);box-shadow:0 0 0 3px #0e7c8626;outline:none}
.dalon-tools .input-group-text{background:var(--tool-soft);border-color:var(--tool-line);color:var(--tool-muted)}
.dalon-tools label,.dalon-tools .form-label{font-weight:600;color:var(--tool-ink)}
.dalon-tools .form-text,.dalon-tools .help-block,.dalon-tools .text-muted{color:var(--tool-muted)!important}
.dalon-tools .input-group>input.form-control{min-height:44px}

/* ---------- tables + DataTables ---------- */
.dalon-tools .table{--bs-table-border-color:var(--tool-line);color:var(--tool-ink)}
.dalon-tools .table>thead>tr>th,.dalon-tools table.dataTable>thead>tr>th{background:var(--tool-soft-2);color:var(--tool-ink);font-weight:650;border-bottom:1px solid var(--tool-line);white-space:nowrap}
.dalon-tools .table-striped>tbody>tr:nth-of-type(odd){--bs-table-accent-bg:var(--tool-soft);background:var(--tool-soft)}
.dalon-tools .dataTables_wrapper .dataTables_filter input,.dalon-tools .dataTables_wrapper .dataTables_length select{border:1px solid var(--tool-line);border-radius:4px;padding:6px 10px;min-height:40px}
.dalon-tools .dataTables_wrapper .dataTables_filter input:focus{border-color:var(--tool-accent);box-shadow:0 0 0 3px #0e7c8626;outline:none}
.dalon-tools .pagination{--bs-pagination-color:var(--tool-brand);--bs-pagination-hover-color:var(--tool-accent-dark);--bs-pagination-active-bg:var(--tool-brand);--bs-pagination-active-border-color:var(--tool-brand);--bs-pagination-focus-box-shadow:0 0 0 3px #0e7c8626}
.dalon-tools .page-link{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center}
.dalon-tools .dataTables_wrapper .dataTables_info,.dalon-tools .dataTables_wrapper .dataTables_length{color:var(--tool-muted)}

/* ---------- breadcrumb ---------- */
.dalon-tools .breadcrumb{background:transparent;padding:0;margin:0 0 18px;font-size:14px;color:var(--tool-muted);flex-wrap:wrap}
.dalon-tools .breadcrumb a{color:var(--tool-brand);text-decoration:none}
.dalon-tools .breadcrumb a:hover{text-decoration:underline}
.dalon-tools .breadcrumb-item+.breadcrumb-item::before{color:var(--tool-muted)}

/* ---------- calculator category tiles (calculator-template.php) ---------- */
.dalon-tools .sublist a{border:1px solid var(--tool-line);border-radius:4px;background:white;color:var(--tool-ink);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.dalon-tools .sublist a:hover{border-color:var(--tool-accent);box-shadow:0 6px 16px #16232b14;transform:translateY(-3px);color:var(--tool-brand)}
.dalon-tools .sublist a:focus-visible{outline:3px solid var(--tool-accent);outline-offset:3px}
.dalon-tools aside .list a{border-radius:4px;color:var(--tool-ink)}
.dalon-tools aside .list a:hover{background:var(--tool-soft-2);color:var(--tool-brand)}
.dalon-tools aside .list a.active-sidebar-link{background:var(--tool-soft-2);border-left:3px solid var(--tool-accent);color:var(--tool-brand);font-weight:650}

/* ---------- CTA blocks ---------- */
.dalon-tools .tools-cta-wrap{margin-top:8px}
.dalon-tools .tools-cta-footer{background:var(--tool-soft-2);border-radius:4px;border-top:3px solid var(--tool-accent);padding:24px;color:var(--tool-ink)}
.dalon-tools .tools-cta-footer h3,.dalon-tools .tools-cta-footer h4{color:var(--tool-ink);font-size:20px;margin-top:0}
.dalon-tools .tools-cta-footer .product-btn{background:var(--tool-brand);border:1px solid var(--tool-brand);color:white}
.dalon-tools .tools-cta-footer .product-btn:hover{background:var(--tool-brand-dark);border-color:var(--tool-brand-dark);color:white}

/* ---------- semantic helpers so INSPINIA greens/oranges disappear ---------- */
.dalon-tools .text-primary{color:var(--tool-brand)!important}
.dalon-tools .text-success{color:var(--tool-accent)!important}
.dalon-tools .text-info{color:var(--tool-brand)!important}
.dalon-tools .bg-primary{background-color:var(--tool-brand)!important}
.dalon-tools .bg-success{background-color:var(--tool-accent)!important}
.dalon-tools .label-primary,.dalon-tools .badge-primary{background:var(--tool-brand);color:white}
.dalon-tools .label-success,.dalon-tools .badge-success{background:var(--tool-accent);color:white}
.dalon-tools .nav-pills .nav-link.active,.dalon-tools .nav-tabs .nav-link.active{background:var(--tool-soft-2);color:var(--tool-brand);border-color:var(--tool-line) var(--tool-line) white}
.dalon-tools .progress{background:var(--tool-soft-2)}
.dalon-tools .progress-bar{background-color:var(--tool-accent)}
.dalon-tools .alert-info{background:var(--tool-soft-2);border-color:var(--tool-line);color:var(--tool-ink)}
.dalon-tools .blockquote-footer,.dalon-tools small{color:var(--tool-muted)}
.dalon-tools .gray-bg{background:var(--tool-soft)}
.dalon-tools .white-bg{background:white}

/* ---------- responsive ---------- */
@media(max-width:991px){
  .dalon-tools .tools-container{padding:22px 18px 44px}
  .dalon-tools .tools-nav-inner{padding:0 18px;gap:10px}
  .dalon-tools .tools-nav-link{min-height:48px;padding:8px 12px;font-size:14px}
  .dalon-tools .tools-lang a{min-width:38px;min-height:38px;font-size:12px}
}
@media(max-width:600px){
  .dalon-tools .tools-container{padding:18px 16px 36px}
  .dalon-tools .tools-nav-list{gap:0}
  .dalon-tools .tools-nav-link span{display:none}
  .dalon-tools .tools-nav-link i{font-size:17px}
  .dalon-tools .ibox-content{padding:16px}
  .dalon-tools .ibox-title{padding:12px 16px}
}
@media(prefers-reduced-motion:reduce){
  .dalon-tools .tools-nav-link,.dalon-tools .sublist a{transition:none}
  .dalon-tools .sublist a:hover{transform:none}
}

/* ---------- shared shell accents inside tool pages use the tool palette ----------
   public-shell.css paints the brand orange; tool pages keep the layout but swap
   the functional accent (CTA buttons, family strip) to the industrial palette.
   The DALON wordmark itself keeps the brand colour. */
.dalon-tools .dalon-public-shell .shell-cta,
.dalon-tools .dalon-public-shell .shell-desktop-nav>a.shell-cta,
.dalon-tools .customer-flow .customer-flow-cta{background:var(--tool-brand);border-color:var(--tool-brand);color:white}
.dalon-tools .dalon-public-shell .shell-cta:hover,
.dalon-tools .customer-flow .customer-flow-cta:hover{background:var(--tool-brand-dark);color:white}
.dalon-tools .dalon-public-shell .shell-family-label{color:var(--tool-brand);border-bottom-color:var(--tool-line)}
.dalon-tools .dalon-public-shell .shell-dropdown a:hover{color:var(--tool-brand)}
.dalon-tools .shell-family-grid a{border-top-color:var(--tool-accent);color:var(--tool-ink)}
.dalon-tools .dalon-public-shell .language-selector [aria-current]{text-decoration-color:var(--tool-accent)}
/* ---------- semantic mis-use: text-danger marks variables/tokens, not errors ----------
   The calculators highlight formula variables with .text-danger and paint a few
   "unit" pills with .bg-danger; both read as red alerts next to the tool palette. */
.dalon-tools .text-danger{color:var(--tool-accent)!important}
.dalon-tools .bg-danger{background-color:var(--tool-soft-2)!important;color:var(--tool-brand)}
.dalon-tools .badge.bg-danger{background-color:var(--tool-soft-2)!important;color:var(--tool-brand)!important;border:1px solid var(--tool-line)}

/* ---------- mobile: keep the category labels, scroll the bar instead ---------- */
@media(max-width:600px){
  .dalon-tools .tools-nav-link{padding:8px 10px;font-size:13px;gap:6px}
  .dalon-tools .tools-nav-link span{display:inline}
  .dalon-tools .tools-nav-list{-webkit-overflow-scrolling:touch;padding-bottom:2px}
}