/*==============================================================================
  PMTrack ERP - Tool & Die Management Module
  File    : Content/ToolManagement/tooldie.css
  Phase   : 4 (Common Framework)

  The design language from the approved screens, written once:
    white surfaces, blue primary accent, green for the committing action,
    orange for warning states, red for critical, rounded cards, subtle shadow.

  Desktop-first at 1920x1080, fluid to 1366, with a tablet breakpoint at
  1024px that collapses the sidebar to icons and stacks the KPI row 2x2.

  NOTE ON CUSTOM PROPERTIES
  -------------------------
  CSS custom properties are NOT used. This stylesheet has to render in the
  browsers a .NET 4.0 estate still meets, including IE11, where var() is not
  supported. The palette is therefore written out literally; the values are
  listed here once so a change is a find-and-replace rather than a hunt.

      Primary blue     #2563EB      Primary dark    #1D4ED8
      Success green    #16A34A      Success dark    #15803D
      Warning orange   #F59E0B      Danger red      #DC2626
      Info cyan        #0891B2      Purple          #A855F7
      Text primary     #111827      Text secondary  #6B7280
      Border           #E5E7EB      Page background #F8FAFC
==============================================================================*/

/*------------------------------------------------------------------ 1. RESET */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body.td-body {
    background-color: #F8FAFC;
    color: #111827;
    font-family: "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.td-body * {
    box-sizing: border-box;
}

.td-body a {
    color: #2563EB;
    text-decoration: none;
}

.td-body a:hover {
    color: #1D4ED8;
    text-decoration: underline;
}

.td-body h1, .td-body h2, .td-body h3, .td-body h4 {
    margin: 0;
    font-weight: 600;
    color: #111827;
}

/*---------------------------------------------------------------- 2. LAYOUT */
.td-shell {
    display: block;
    min-height: 100vh;
}

/* Sidebar */
.td-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 216px;
    background: #FFFFFF;
    border-right: 1px solid #E5E7EB;
    z-index: 1030;
    overflow-y: auto;
    overflow-x: hidden;
}

.td-brand {
    display: block;
    padding: 16px 18px;
    border-bottom: 1px solid #F1F5F9;
    white-space: nowrap;
}

.td-brand-mark {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #2563EB;
    color: #FFFFFF;
    text-align: center;
    line-height: 26px;
    font-weight: 700;
    font-size: 13px;
    vertical-align: middle;
}

.td-brand-text {
    display: inline-block;
    margin-left: 9px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    vertical-align: middle;
}

.td-nav {
    list-style: none;
    margin: 8px 0 24px 0;
    padding: 0;
}

.td-nav-section {
    padding: 14px 18px 6px 18px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9CA3AF;
}

.td-nav li a {
    display: block;
    padding: 8px 18px;
    color: #374151;
    font-size: 13px;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-nav li a:hover {
    background: #F8FAFC;
    color: #111827;
    text-decoration: none;
}

.td-nav li a.td-active {
    background: #EFF6FF;
    color: #1D4ED8;
    border-left-color: #2563EB;
    font-weight: 600;
}

.td-nav-icon {
    display: inline-block;
    width: 18px;
    text-align: center;
    margin-right: 9px;
    opacity: .85;
}

/* Header */
.td-header {
    position: fixed;
    top: 0;
    left: 216px;
    right: 0;
    height: 54px;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    z-index: 1020;
    padding: 0 20px;
}

.td-header-inner {
    display: block;
    height: 54px;
    line-height: 54px;
}

.td-search {
    display: inline-block;
    vertical-align: middle;
    width: 320px;
    max-width: 40%;
}

.td-search input {
    width: 100%;
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    border: 1px solid #E5E7EB;
    border-radius: 7px;
    background: #F8FAFC;
    font-size: 12px;
    color: #111827;
}

.td-search input:focus {
    outline: none;
    border-color: #2563EB;
    background: #FFFFFF;
}

.td-header-right {
    float: right;
}

.td-header-right > * {
    vertical-align: middle;
}

.td-bell {
    position: relative;
    display: inline-block;
    margin-right: 16px;
    color: #6B7280;
    font-size: 15px;
}

.td-bell-dot {
    position: absolute;
    top: 14px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #DC2626;
    border: 2px solid #FFFFFF;
}

.td-user {
    display: inline-block;
    font-size: 12px;
    color: #374151;
}

.td-avatar {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2563EB;
    color: #FFFFFF;
    text-align: center;
    line-height: 28px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 8px;
    vertical-align: middle;
}

/* Content */
.td-content {
    margin-left: 216px;
    padding: 74px 20px 32px 20px;
}

/*------------------------------------------------------- 3. PAGE HEAD */
.td-breadcrumb {
    font-size: 11px;
    color: #9CA3AF;
    margin-bottom: 6px;
}

.td-breadcrumb a {
    color: #6B7280;
}

.td-breadcrumb span.sep {
    margin: 0 6px;
    color: #D1D5DB;
}

.td-page-head {
    margin-bottom: 18px;
}

.td-page-head:after {
    content: "";
    display: table;
    clear: both;
}

.td-page-title {
    font-size: 19px;
    font-weight: 600;
    color: #111827;
    float: left;
}

.td-page-subtitle {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #6B7280;
    margin-top: 2px;
}

.td-page-actions {
    float: right;
    padding-top: 2px;
}

.td-page-actions > * {
    margin-left: 8px;
}

/*------------------------------------------------------------- 4. CARDS */
.td-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
    margin-bottom: 18px;
}

.td-card-head {
    padding: 14px 18px;
    border-bottom: 1px solid #F1F5F9;
}

.td-card-head:after {
    content: "";
    display: table;
    clear: both;
}

.td-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    float: left;
}

.td-card-tools {
    float: right;
}

.td-card-body {
    padding: 18px;
}

.td-card-body.td-tight {
    padding: 0;
}

/* KPI tiles */
.td-kpi-row {
    margin: 0 -9px 4px -9px;
}

.td-kpi-row:after {
    content: "";
    display: table;
    clear: both;
}

.td-kpi-col {
    float: left;
    padding: 0 9px;
    margin-bottom: 18px;
}

.td-kpi-col-4 { width: 25%; }
.td-kpi-col-3 { width: 33.3333%; }
.td-kpi-col-5 { width: 20%; }

.td-kpi {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
    padding: 16px 18px;
    min-height: 84px;
}

.td-kpi-icon {
    float: left;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    text-align: center;
    line-height: 42px;
    font-size: 17px;
    margin-right: 13px;
    color: #FFFFFF;
}

.td-kpi-icon.blue   { background: #2563EB; }
.td-kpi-icon.green  { background: #16A34A; }
.td-kpi-icon.orange { background: #F59E0B; }
.td-kpi-icon.red    { background: #DC2626; }
.td-kpi-icon.cyan   { background: #0891B2; }
.td-kpi-icon.purple { background: #A855F7; }
.td-kpi-icon.grey   { background: #6B7280; }

.td-kpi-value {
    font-size: 23px;
    font-weight: 700;
    color: #111827;
    line-height: 1.15;
}

.td-kpi-label {
    font-size: 11px;
    color: #6B7280;
    margin-top: 1px;
}

.td-kpi-sub {
    font-size: 10px;
    color: #9CA3AF;
    margin-top: 3px;
}

/*------------------------------------------------------------ 5. BUTTONS */
.td-btn {
    display: inline-block;
    padding: 7px 15px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    background: #FFFFFF;
    color: #374151;
    text-decoration: none;
}

.td-btn:hover      { text-decoration: none; }
.td-btn:focus      { outline: 2px solid rgba(37, 99, 235, .35); outline-offset: 1px; }
.td-btn[disabled],
.td-btn.td-disabled { opacity: .55; cursor: not-allowed; }

.td-btn-primary   { background: #2563EB; border-color: #2563EB; color: #FFFFFF; }
.td-btn-primary:hover   { background: #1D4ED8; border-color: #1D4ED8; color: #FFFFFF; }

.td-btn-success   { background: #16A34A; border-color: #16A34A; color: #FFFFFF; }
.td-btn-success:hover   { background: #15803D; border-color: #15803D; color: #FFFFFF; }

.td-btn-danger    { background: #DC2626; border-color: #DC2626; color: #FFFFFF; }
.td-btn-danger:hover    { background: #B91C1C; border-color: #B91C1C; color: #FFFFFF; }

.td-btn-warning   { background: #F59E0B; border-color: #F59E0B; color: #FFFFFF; }
.td-btn-warning:hover   { background: #D97706; border-color: #D97706; color: #FFFFFF; }

.td-btn-outline   { background: #FFFFFF; border-color: #E5E7EB; color: #374151; }
.td-btn-outline:hover   { background: #F8FAFC; border-color: #D1D5DB; color: #111827; }

.td-btn-link      { background: transparent; border-color: transparent; color: #2563EB; padding: 4px 6px; }

/*  An <asp:HyperLink CssClass="td-btn ..."> renders as an <a>, and the
    ".td-body a" rule in section 1 is more specific (0,1,1) than the variant
    rules above (0,1,0) - so without these the text of every link-button came
    out link-blue instead of the variant's own colour. These declarations are
    deliberately colour-only; everything else still comes from the variants. */
.td-body a.td-btn,
.td-body a.td-btn:hover           { text-decoration: none; }
.td-body a.td-btn                 { color: #374151; }
.td-body a.td-btn-primary         { color: #FFFFFF; }
.td-body a.td-btn-primary:hover   { color: #FFFFFF; }
.td-body a.td-btn-success         { color: #FFFFFF; }
.td-body a.td-btn-success:hover   { color: #FFFFFF; }
.td-body a.td-btn-danger          { color: #FFFFFF; }
.td-body a.td-btn-danger:hover    { color: #FFFFFF; }
.td-body a.td-btn-warning         { color: #FFFFFF; }
.td-body a.td-btn-warning:hover   { color: #FFFFFF; }
.td-body a.td-btn-outline         { color: #374151; }
.td-body a.td-btn-outline:hover   { color: #111827; }
.td-body a.td-btn-link            { color: #2563EB; }
.td-body a.td-btn-link:hover      { color: #1D4ED8; }

.td-btn-lg        { padding: 11px 22px; font-size: 13px; border-radius: 8px; }
.td-btn-sm        { padding: 4px 10px;  font-size: 11px; border-radius: 6px; }
.td-btn-block     { display: block; width: 100%; }

/*------------------------------------------------------------- 6. FORMS */
.td-form-row {
    margin: 0 -9px;
}

.td-form-row:after {
    content: "";
    display: table;
    clear: both;
}

.td-col {
    float: left;
    padding: 0 9px;
    margin-bottom: 14px;
}

.td-col-1  { width: 8.3333%; }
.td-col-2  { width: 16.6667%; }
.td-col-3  { width: 25%; }
.td-col-4  { width: 33.3333%; }
.td-col-5  { width: 41.6667%; }
.td-col-6  { width: 50%; }
.td-col-8  { width: 66.6667%; }
.td-col-9  { width: 75%; }
.td-col-12 { width: 100%; }

.td-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}

.td-label .req {
    color: #DC2626;
    margin-left: 2px;
}

.td-input,
.td-body input[type="text"].td-input,
.td-body input[type="password"].td-input,
.td-body select.td-input,
.td-body textarea.td-input {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 11px;
    border: 1px solid #E5E7EB;
    border-radius: 7px;
    background: #FFFFFF;
    font-size: 12px;
    font-family: inherit;
    color: #111827;
}

.td-body textarea.td-input {
    height: auto;
    min-height: 66px;
    resize: vertical;
}

.td-input:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.td-input[readonly],
.td-input[disabled] {
    background: #F8FAFC;
    color: #6B7280;
}

.td-input.td-invalid {
    border-color: #DC2626;
    background: #FEF2F2;
}

.td-hint {
    font-size: 10px;
    color: #9CA3AF;
    margin-top: 3px;
}

.td-field-error {
    display: block;
    font-size: 10px;
    color: #DC2626;
    margin-top: 3px;
}

/* Read-only display value, used on the fetched-die panels */
.td-static {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    padding-top: 2px;
}

.td-static-label {
    display: block;
    font-size: 10px;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 1px;
}

/* A heading inside a card, one level below .td-card-title */
.td-subhead {
    font-size: 11px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid #F3F4F6;
}

/* The row of buttons that closes a form inside a card */
.td-form-actions {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #F3F4F6;
    text-align: right;
}

.td-form-actions .td-btn {
    margin-left: 6px;
}

.td-checkline {
    display: block;
    padding: 6px 0;
    font-size: 12px;
    color: #374151;
}

.td-checkline input {
    margin-right: 8px;
    vertical-align: middle;
}

/* Filter bar */
.td-filterbar {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px 18px 2px 18px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

/*-------------------------------------------------------------- 7. TABLES */
.td-table-wrap {
    overflow-x: auto;
}

.td-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.td-table th {
    background: #F8FAFC;
    color: #6B7280;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid #E5E7EB;
    white-space: nowrap;
}

.td-table th a {
    color: #6B7280;
}

.td-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #F1F5F9;
    color: #374151;
    vertical-align: middle;
}

.td-table tr:last-child td {
    border-bottom: none;
}

.td-table tbody tr:hover {
    background: #F8FAFC;
}

.td-table .td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.td-table .td-strong {
    font-weight: 600;
    color: #111827;
}

.td-table .td-actions {
    white-space: nowrap;
    text-align: right;
}

.td-table .td-actions a {
    display: inline-block;
    margin-left: 10px;
    color: #6B7280;
    font-size: 12px;
}

.td-table .td-actions a:hover {
    color: #2563EB;
    text-decoration: none;
}

.td-empty {
    padding: 44px 18px;
    text-align: center;
    color: #9CA3AF;
    font-size: 12px;
}

.td-empty-title {
    display: block;
    font-size: 13px;
    color: #6B7280;
    font-weight: 600;
    margin-bottom: 3px;
}

/*-------------------------------------------------------------- 8. BADGES */
.td-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    white-space: nowrap;
}

.td-badge-success       { background: #DCFCE7; color: #15803D; }
.td-badge-primary       { background: #DBEAFE; color: #1D4ED8; }
.td-badge-info          { background: #CFFAFE; color: #0E7490; }
.td-badge-warning       { background: #FEF3C7; color: #B45309; }
.td-badge-warning-soft  { background: #FFEDD5; color: #C2410C; }
.td-badge-danger        { background: #FEE2E2; color: #B91C1C; }
.td-badge-purple        { background: #F3E8FF; color: #7E22CE; }
.td-badge-neutral       { background: #F1F5F9; color: #475569; }

/* A status badge tinted from ToolDieStatusMaster.ColorCode at render time */
.td-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/*----------------------------------------------------------- 9. PROGRESS */
.td-progress {
    height: 6px;
    background: #F1F5F9;
    border-radius: 999px;
    overflow: hidden;
    min-width: 72px;
}

.td-progress-bar {
    height: 6px;
    border-radius: 999px;
}

.td-progress-success .td-progress-bar { background: #16A34A; }
.td-progress-info    .td-progress-bar { background: #0891B2; }
.td-progress-warning .td-progress-bar { background: #F59E0B; }
.td-progress-danger  .td-progress-bar { background: #DC2626; }

.td-progress-label {
    font-size: 10px;
    color: #6B7280;
    margin-top: 3px;
    display: block;
}

/*--------------------------------------------------------- 10. ALERT BAR */
.td-alert {
    border-radius: 9px;
    padding: 11px 15px;
    font-size: 12px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.td-alert-success { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.td-alert-info    { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
.td-alert-warning { background: #FFFBEB; border-color: #FDE68A; color: #B45309; }
.td-alert-danger  { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }

.td-alert strong { font-weight: 700; }

.td-alert-close {
    float: right;
    color: inherit;
    opacity: .6;
    font-weight: 700;
    cursor: pointer;
}

/*-------------------------------------------------------- 11. PAGINATION */
.td-pager {
    padding: 13px 18px;
    border-top: 1px solid #F1F5F9;
    font-size: 12px;
    color: #6B7280;
}

.td-pager:after {
    content: "";
    display: table;
    clear: both;
}

.td-pager-info  { float: left;  padding-top: 5px; }
.td-pager-links { float: right; }

.td-pager-links a,
.td-pager-links span {
    display: inline-block;
    min-width: 28px;
    padding: 4px 8px;
    margin-left: 4px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    text-align: center;
    color: #374151;
    background: #FFFFFF;
}

.td-pager-links a:hover {
    background: #F8FAFC;
    text-decoration: none;
}

.td-pager-links span.current {
    background: #2563EB;
    border-color: #2563EB;
    color: #FFFFFF;
    font-weight: 600;
}

.td-pager-links span.disabled {
    color: #D1D5DB;
    background: #F8FAFC;
}

/*------------------------------------------------------------- 12. TABS */
.td-tabs {
    border-bottom: 1px solid #E5E7EB;
    padding: 0 18px;
}

.td-tabs a {
    display: inline-block;
    padding: 11px 15px;
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.td-tabs a:hover {
    color: #374151;
    text-decoration: none;
}

.td-tabs a.td-active {
    color: #2563EB;
    border-bottom-color: #2563EB;
}

/*----------------------------------------------------- 13. KANBAN BOARD */
.td-board {
    overflow-x: auto;
    padding-bottom: 8px;
    white-space: nowrap;
}

.td-board-col {
    display: inline-block;
    vertical-align: top;
    width: 268px;
    margin-right: 14px;
    white-space: normal;
}

.td-board-col-head {
    padding: 10px 13px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
}

.td-board-col-head:after {
    content: "";
    display: table;
    clear: both;
}

.td-board-col-title {
    float: left;
    font-size: 12px;
    font-weight: 700;
    color: #111827;
}

.td-board-col-count {
    float: right;
    font-size: 10px;
    font-weight: 700;
    background: #F1F5F9;
    color: #475569;
    border-radius: 999px;
    padding: 2px 8px;
}

.td-board-col-body {
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    min-height: 220px;
    max-height: 640px;
    overflow-y: auto;
}

.td-die-card {
    display: block;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-left: 3px solid #2563EB;
    border-radius: 9px;
    padding: 11px 13px;
    margin-bottom: 9px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    color: #374151;
}

.td-die-card:hover {
    border-color: #C7D2FE;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .09);
    text-decoration: none;
}

.td-die-card-no {
    font-size: 12px;
    font-weight: 700;
    color: #111827;
}

.td-die-card-desc {
    font-size: 11px;
    color: #6B7280;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-die-card-meta {
    font-size: 10px;
    color: #9CA3AF;
    margin-top: 6px;
}

.td-die-card-foot {
    margin-top: 8px;
}

.td-die-card-foot:after {
    content: "";
    display: table;
    clear: both;
}

/*------------------------------------------------------ 14. SCAN PANELS */
.td-scan {
    text-align: center;
    padding: 26px 18px;
}

.td-scan-icon {
    display: inline-block;
    width: 104px;
    height: 104px;
    border-radius: 14px;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 44px;
    line-height: 104px;
    margin-bottom: 14px;
}

.td-scan-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.td-scan-hint {
    font-size: 11px;
    color: #6B7280;
    margin: 5px 0 16px 0;
}

.td-scan-or {
    position: relative;
    text-align: center;
    color: #9CA3AF;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 13px 0;
}

.td-scan-or:before,
.td-scan-or:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 38%;
    height: 1px;
    background: #E5E7EB;
}

.td-scan-or:before { left: 0; }
.td-scan-or:after  { right: 0; }

/* Die information panel shown after a successful scan */
.td-die-panel {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    padding: 14px 16px;
}

.td-die-panel.td-blocked {
    background: #FEF2F2;
    border-color: #FECACA;
}

.td-die-panel-head {
    font-size: 11px;
    font-weight: 700;
    color: #15803D;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 9px;
}

.td-die-panel.td-blocked .td-die-panel-head { color: #B91C1C; }

.td-die-thumb {
    width: 74px;
    height: 74px;
    border-radius: 9px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    object-fit: cover;
}

/*-------------------------------------------------- 15. QR LABEL PREVIEW */
.td-qr-preview {
    text-align: center;
    padding: 18px;
    border: 1px dashed #D1D5DB;
    border-radius: 10px;
    background: #FFFFFF;
}

.td-qr-preview img {
    display: block;
    margin: 0 auto 10px auto;
}

.td-qr-dieno {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.td-qr-desc {
    font-size: 11px;
    color: #6B7280;
}

/*----------------------------------------------------- 16. MODAL DIALOG */
.td-modal-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(17, 24, 39, .45);
    z-index: 1050;
}

.td-modal {
    position: fixed;
    top: 12%;
    left: 50%;
    width: 460px;
    margin-left: -230px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .22);
    z-index: 1060;
}

.td-modal-head {
    padding: 15px 20px;
    border-bottom: 1px solid #F1F5F9;
    font-size: 14px;
    font-weight: 600;
}

.td-modal-body {
    padding: 20px;
    font-size: 12px;
    color: #374151;
}

.td-modal-foot {
    padding: 13px 20px;
    border-top: 1px solid #F1F5F9;
    text-align: right;
}

.td-modal-foot .td-btn { margin-left: 8px; }

.td-modal-wide { width: 720px; margin-left: -360px; }

/*------------------------------------------------------- 17. MINI CHARTS
  Charts are drawn with plain markup rather than a charting library: a
  .NET 4.0 estate should not gain a JavaScript dependency for two figures on
  one screen, and these render identically in every browser it has to meet.
------------------------------------------------------------------------*/
.td-bars {
    height: 168px;
    padding-top: 10px;
}

.td-bar-col {
    display: inline-block;
    vertical-align: bottom;
    width: 13%;
    text-align: center;
    height: 100%;
}

.td-bar-stack {
    height: 138px;
    position: relative;
}

.td-bar {
    position: absolute;
    bottom: 0;
    left: 22%;
    width: 56%;
    background: #2563EB;
    border-radius: 4px 4px 0 0;
    min-height: 2px;
}

.td-bar.alt { background: #93C5FD; }

.td-bar-label {
    font-size: 9px;
    color: #9CA3AF;
    margin-top: 7px;
    white-space: nowrap;
}

/* Donut, drawn with a conic gradient where supported and a legend that
   carries the same information where it is not. */
.td-donut {
    position: relative;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    margin: 0 auto;
    background: #F1F5F9;
}

.td-donut-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 104px;
    height: 104px;
    margin: -52px 0 0 -52px;
    background: #FFFFFF;
    border-radius: 50%;
    text-align: center;
}

.td-donut-value {
    font-size: 23px;
    font-weight: 700;
    color: #111827;
    margin-top: 32px;
}

.td-donut-label {
    font-size: 10px;
    color: #9CA3AF;
}

.td-legend {
    margin-top: 16px;
}

.td-legend-item {
    font-size: 11px;
    color: #374151;
    padding: 3px 0;
}

.td-legend-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
}

.td-legend-count {
    float: right;
    font-weight: 600;
    color: #111827;
}

/*----------------------------------------------------- 18. TIMELINE */
.td-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
    border-left: 2px solid #E5E7EB;
}

.td-timeline li {
    position: relative;
    padding: 0 0 18px 0;
}

.td-timeline li:before {
    content: "";
    position: absolute;
    left: -26px;
    top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2563EB;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 2px #E5E7EB;
}

.td-timeline-title {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
}

.td-timeline-meta {
    font-size: 10px;
    color: #9CA3AF;
    margin-top: 1px;
}

/*------------------------------------------------- 19. UTILITY CLASSES */
.td-mt-0  { margin-top: 0 !important; }
.td-mt-8  { margin-top: 8px; }
.td-mt-16 { margin-top: 16px; }
.td-mb-0  { margin-bottom: 0 !important; }
.td-mb-8  { margin-bottom: 8px; }
.td-mb-16 { margin-bottom: 16px; }
.td-right { text-align: right; }
.td-center{ text-align: center; }
.td-muted { color: #6B7280; }
.td-small { font-size: 11px; }
.td-nowrap{ white-space: nowrap; }
.td-hidden{ display: none !important; }
.td-clear:after { content: ""; display: table; clear: both; }

.td-text-success { color: #15803D; }
.td-text-warning { color: #B45309; }
.td-text-danger  { color: #B91C1C; }
.td-text-primary { color: #1D4ED8; }

/* Money and quantity inputs read right-aligned, as they do on paper */
.td-cost {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The one number on a costing panel that people look for first */
.td-total {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

/*--------------------------------------------------- 20. RESPONSIVE */
@media (max-width: 1440px) {
    .td-kpi-col-5 { width: 25%; }
}

@media (max-width: 1024px) {
    .td-sidebar { width: 60px; }
    .td-brand-text,
    .td-nav-section,
    .td-nav li a span.td-nav-text { display: none; }
    .td-nav li a { text-align: center; padding: 11px 0; }
    .td-nav-icon { margin-right: 0; }

    .td-header  { left: 60px; }
    .td-content { margin-left: 60px; }

    .td-kpi-col-4, .td-kpi-col-5, .td-kpi-col-3 { width: 50%; }
    .td-col-3, .td-col-4 { width: 50%; }
    .td-search { width: 200px; }
}

@media (max-width: 768px) {
    .td-kpi-col-4, .td-kpi-col-5, .td-kpi-col-3 { width: 100%; }
    .td-col-2, .td-col-3, .td-col-4, .td-col-5, .td-col-6, .td-col-8, .td-col-9 { width: 100%; }
    .td-page-title, .td-page-actions { float: none; }
    .td-page-actions { margin-top: 10px; }
    .td-modal { width: auto; left: 16px; right: 16px; margin-left: 0; }
}

/*------------------------------------------------- 21. ERROR PAGES

  The three error pages stand alone: they do not use the module's master page,
  because the master page reads the session and the permission cache, and the one
  thing an error page must not do is fail for the same reason the request did.
  So they need their own small block of layout here.                          */
.td-errorpage {
    display: table;
    width: 100%;
    height: 100%;
    min-height: 420px;
    background: #F3F4F6;
}

.td-errorpage-card {
    display: block;
    width: 440px;
    max-width: 90%;
    margin: 80px auto;
    padding: 32px 28px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    text-align: center;
}

.td-errorpage-mark {
    width: 52px;
    height: 52px;
    line-height: 52px;
    margin: 0 auto 16px auto;
    border-radius: 50%;
    background: #FEF2F2;
    color: #DC2626;
    font-size: 26px;
    font-weight: 700;
}

.td-errorpage-mark-warning { background: #FFFBEB; color: #B45309; }
.td-errorpage-mark-muted   { background: #F3F4F6; color: #6B7280; }

.td-errorpage-title {
    margin: 0 0 10px 0;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
}

.td-errorpage-text {
    margin: 0 0 10px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #4B5563;
}

/* The reference code. Monospaced and selectable, because the user has to read it
   out or paste it into a support message. */
.td-errorpage-ref {
    margin: 18px 0;
    padding: 12px;
    background: #F9FAFB;
    border: 1px dashed #D1D5DB;
    border-radius: 4px;
}

.td-errorpage-ref-label {
    display: block;
    font-size: 10px;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.td-errorpage-ref-code {
    display: block;
    margin: 4px 0 6px 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    color: #111827;
    word-break: break-all;
}

.td-errorpage-ref-hint {
    display: block;
    font-size: 10px;
    color: #9CA3AF;
    line-height: 1.4;
}

.td-errorpage-actions { margin-top: 20px; }

/*------------------------------------------------- 21b. LOGIN

  The login page reuses the error-page card, because both are the same thing: one
  centred panel on an empty background, with no navigation to escape into. These
  are the few extras it needs.                                                  */
.td-login-brand {
    margin-bottom: 18px;
}

.td-login-brand-text {
    display: inline-block;
    margin-left: 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #111827;
    vertical-align: middle;
}

.td-login-field {
    margin-bottom: 12px;
    text-align: left;
}

.td-login-hint {
    margin-top: 20px;
    padding: 12px;
    background: #F9FAFB;
    border: 1px dashed #D1D5DB;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.5;
    color: #4B5563;
    text-align: left;
}

.td-login-hint code {
    padding: 1px 4px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 3px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    color: #111827;
}

/* The sign-out link in the header, present only in the standalone package. */
.td-signout {
    margin-left: 14px;
    font-size: 11px;
    color: #6B7280;
    text-decoration: none;
}

.td-signout:hover {
    color: #111827;
    text-decoration: underline;
}

/*------------------------------------------------------- 22. PRINT

  Print rules are NOT here. They live in tooldie-print.css, which the master page
  links with media="print", because they are long enough to deserve their own file
  and because the QR label mode in them has to be read alongside the label markup.
  Keeping a second set here would mean two places to change and a cascade order to
  reason about, so this section is deliberately empty.                          */