:root{
  --maroon:#b32063;        /* softened maroon for light UI */
  --magenta:#d81b60;       /* primary pink accent (unchanged) */
  --accent:#ffb300;        /* soft gold accent */
  --ink:#1f111c;           /* primary text */
  --bg:#fff7fc;            /* page background */
  --surface:#ffffff;       /* cards & panels */
  --muted:#6f5c69;         /* subdued text */
  --border:#efd9e7;        /* soft border */
  --ok:#1fbf75;
  --danger:#d63663;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial;color:var(--ink);background:linear-gradient(120deg,#fff,var(--bg) 55%,#fff2f7)}
.container{max-width:1200px;margin:32px auto;padding:0 16px}
.hidden{display:none !important}

.dt-navbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:linear-gradient(90deg,#1f0f1b,#2d1833);box-shadow:0 10px 30px rgba(0,0,0,.28);position:sticky;top:0;z-index:10}
.dt-brand{display:flex;align-items:baseline;gap:12px}
.dt-logo{font-weight:800;font-size:22px;letter-spacing:.3px;color:#ffe8f4}
.dt-logo span{color:#fff;border-bottom:2px solid var(--accent);padding:0 2px}
.dt-sub{color:#f7d6e8;opacity:.9}
nav a{color:#f7d6e8;text-decoration:none;margin-left:16px;font-weight:600}
.dt-bottom-bar{height:22px;background:linear-gradient(90deg,#1b0d16,#2b1730);box-shadow:0 -8px 20px rgba(0,0,0,.18);margin-top:24px;}
.btn-primary, .btn-secondary, .btn-ghost, .btn-link, .btn-danger{appearance:none;border:none;border-radius:12px;padding:10px 14px;cursor:pointer;text-decoration:none;display:inline-block;font-weight:700}
.btn-primary{background:linear-gradient(90deg,var(--magenta),#ff6bab);color:#fff;box-shadow:0 8px 16px rgba(216,27,96,.28)}
.btn-secondary{background:#fff;color:var(--maroon);border:1px solid var(--border);box-shadow:0 4px 12px rgba(0,0,0,.04)}
.btn-ghost{background:#fff;color:var(--maroon);border:1px dashed var(--border)}
.btn-link{color:var(--magenta);padding:0;background:transparent;border:none}
.btn-link.danger{color:var(--danger)}
.btn-danger{background:var(--danger);color:#fff;box-shadow:0 6px 14px rgba(214,54,99,.25)}

.card {
  width: calc(100% - 80px);   /* shrink width by 40 px on each side */
  margin: 0 40px 22px 40px;   /* 40 px left & right, 22 px bottom */
  max-width: none;

  background:
      radial-gradient(1200px 600px at -10% -10%, rgba(216,27,96,.10), transparent 40%),
      radial-gradient(1200px 600px at 110% -10%, rgba(255,193,7,.08), transparent 40%),
      var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 18px 22px;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

.card h2 {
  margin: 6px 4px 16px;
  color: var(--ink);
}
.card.danger {
  border-color: #f3b5c8;
}


.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.span-2{grid-column:1/-1}

.field label{display:block;font-weight:700;margin-bottom:6px;color:var(--ink)}
.field input, .field textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--ink);outline:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.field input:focus, .field textarea:focus{border-color:#ff7ab5;box-shadow:0 0 0 3px rgba(216,27,96,.18)}

.barcode-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.small{color:var(--muted)}

.list-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.search{display:flex;gap:10px}
.search input{min-width:320px}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th, .table td{border-bottom:1px solid var(--border);padding:10px 8px;text-align:left}
.table th{color:var(--ink);font-weight:800}
.table td code{color:var(--magenta)}
.table .actions-cell a{margin-right:10px}
.empty{color:var(--muted);text-align:center}

.flash{margin-bottom:16px}
.flash-item{background:#f2e9f0;border-left:4px solid var(--ok);padding:10px 12px;border-radius:8px;margin:8px 0;color:var(--ink)}

/* Dealer cards & dates */
.dealer-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap:14px;
}
.dealer-card{
  display:block;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  text-decoration:none;
  color:var(--ink);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.dealer-card:hover{ transform: translateY(-2px); border-color:#f3b5c8; box-shadow:0 14px 30px rgba(0,0,0,.18); }
.dealer-name{ font-weight:800; font-size:18px; }
.dealer-shop{ color:var(--muted); opacity:.85; margin-top:2px; }
.dealer-line{ color:var(--ink); margin-top:6px; font-size:14px; }
.dealer-addr{ color:var(--muted); margin-top:6px; font-size:13px; }

.date-list{ display:flex; flex-direction:column; gap:10px; }
.date-item{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  text-decoration:none; color:var(--ink);
}
.date-item:hover{ border-color:#f3b5c8; }
.badge{ background:#fff3f9; border:1px solid #f3b5c8; color:var(--magenta); border-radius:999px; padding:4px 10px; font-size:12px; }

/* Modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.35); z-index:1000; padding:20px; }
.modal.open{ display:flex; }
.modal-content{
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; max-width:920px; width:100%; color:var(--ink);
  box-shadow:0 22px 60px rgba(0,0,0,.16);
}
.modal-actions{ margin-top:12px; display:flex; gap:10px; justify-content:flex-end; }

/* Actions column + clean, consistent icon buttons */
.actions-col { width: 170px; }
.actions-cell { white-space: nowrap; }

/* anchor + button variants share the same look */
.icon-btn,
a.icon-btn:link,
a.icon-btn:visited,
a.icon-btn:hover,
a.icon-btn:active {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px;
  background:#fff;
  color:var(--magenta) !important;          /* force override default blue/purple link */
  border:1px solid var(--border);
  cursor:pointer; text-decoration:none; margin-right:8px;
  transition:transform .08s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
  line-height:0;                      /* keep SVG perfectly centered */
}

.icon-btn:hover{
  border-color:#ff7ab5;
  color:#ff2f88 !important;
  box-shadow:0 6px 16px rgba(216,27,96,.20) inset;
  transform: translateY(-1px);
}
.icon-btn:disabled{ opacity:.45; cursor:not-allowed; }
.icon-btn.danger:hover{ border-color:#ef476f; box-shadow:0 6px 16px rgba(239,71,111,.25) inset; }

/* Make any SVG inside the actions cell obey our size & color */
.actions-cell svg,
.icon-btn svg,
svg.icon {
  width:22px; height:22px; 
  flex:0 0 22px;
  stroke:currentColor; 
  fill:none;
  display:block;
}

/* Add this near the .container rule in theme.css */
/* === Full-width page container override === */
main.container.container--full {
  max-width: none !important;
  width: 100% !important;
  padding-left: 50px !important;
  padding-right: 50px !important;
}



.table-lined th, .table-lined td { white-space: normal; }


/* Make each payment method a single row: [icon+label]  [₹  input] */
.pay-grid .pay-field{
  display:grid;
  grid-template-columns: auto 1fr;   /* left = icon+label, right = input */
  align-items:center;
  gap:12px;
}

/* keep the icon+label on one line */
.pay-field .pay-head{
  margin:0; 
  display:inline-flex; 
  align-items:center; 
  gap:10px;
}

/* money input fills the cell and looks like a single control */
  .pay-field .money-field{
    width:100%;
    position:relative;
    display:flex;
    align-items:center;
    border:1px solid var(--border);
    background:#fff;
    border-radius:12px;
    height:44px;
    transition:border-color .15s, box-shadow .15s;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
  }
  .pay-field .money-field:focus-within{
    border-color:#ff7ab5;
    box-shadow:0 0 0 3px rgba(216,27,96,.16);
  }
  .pay-field .money-field .prefix{
    padding:0 10px 0 12px;
    color:var(--muted);
    opacity:.9;
    font-weight:700;
  }
  .pay-field .money-field input{
    flex:1; height:100%;
    background:transparent; color:var(--ink); border:0; outline:none;
    padding:0 12px 0 4px; text-align:right;
    font-variant-numeric: tabular-nums;
  }

/* remove number spinners for cleaner look (optional) */
.pay-field .money-field input::-webkit-outer-spin-button,
.pay-field .money-field input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.pay-field .money-field input[type="number"]{ -moz-appearance: textfield; }

/* specifically target the Card tile */
.pay-ico.card{
  font-size:14px; line-height:1; 
  width:28px; height:28px; 
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden;                /* clip any oversize glyph */
}
.pay-grid .pay-field{
  display:grid;
  grid-template-columns: 130px 1fr;
  align-items:center; gap:12px;
}
.pay-field .money-field{ min-width:0; }
.pay-field .money-field input{ min-width:0; }


/* two-column grid: fixed left chunk for icon+label */
.pay-grid .pay-field{
  display:grid;
  grid-template-columns: 130px 1fr;
  align-items:center;
  gap:12px;
}

/* all tiles fixed size */
.pay-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  border-radius:8px;
  overflow:hidden;
  line-height:1;
}

/* SVG sizing / inherit theme color */
.icon-cc, .icon-qr{
  width:18px; height:18px;
  stroke:currentColor; fill:none; stroke-width:2;
}

/* themed backgrounds */
.pay-ico.cash  { background:#e6f7ed; color:#1f7a45; border:1px solid #c7e8d4; }
.pay-ico.card  { background:#e9edfb; color:#2b3f96; border:1px solid #d7ddf5; }
.pay-ico.upi   { background:#e8f7f2; color:#1e6752; border:1px solid #d4ebe1; }
.pay-ico.bajaj { background:#e5edfb; color:#305bb5; border:1px solid #d3dcf5; font-weight:700; }

/* keep inputs from overflowing grid */
.pay-field .money-field{ min-width:0; }
.pay-field .money-field input{ min-width:0; text-align:right; }



/* charts */
.charts-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 920px){ .charts-grid{ grid-template-columns: 1fr; } }

.chart-box{
  background: radial-gradient(800px 400px at -10% -10%, rgba(216,27,96,.10), transparent 40%),
              radial-gradient(800px 400px at 110% -10%, rgba(255,193,7,.07), transparent 40%),
              #fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 16px 12px;
  box-shadow:
    0 18px 40px rgba(0,0,0,.10),   /* lift */
    inset 0 1px 0 rgba(255,255,255,.45); /* subtle inner bevel */
}
.chart-title{
  color:var(--ink); font-weight:800; margin:0 0 8px;
}