/* Delivery CRM — Tesla-inspired clean minimal UI */
:root{
  --brand:#171a20;
  --brand-accent:#e82127;
  --ink:#171a20;
  --muted:#5c5e62;
  --bg:#f4f4f4;
  --card:#ffffff;
  --border:#e3e3e3;
  --yellow:#f4c542;
  --blue:#3e6ae1;
  --green:#12bb6a;
}

html,body{background:var(--bg);color:var(--ink);font-family:-apple-system,'SF Pro Display','Helvetica Neue',Arial,sans-serif;font-weight:400;letter-spacing:.2px;}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}

/* Top nav */
.dcrm-nav{
  background:var(--brand);
  color:#fff;
  padding:.85rem 1.25rem;
  display:flex;align-items:center;gap:1.5rem;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.dcrm-nav .brand{font-weight:600;font-size:1.15rem;letter-spacing:1.5px;text-transform:uppercase;color:#fff;}
.dcrm-nav .brand span{color:var(--brand-accent);}
.dcrm-nav a.navlink{color:#e9e9e9;font-size:.92rem;padding:.35rem .6rem;border-radius:4px;}
.dcrm-nav a.navlink:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff;}
.dcrm-nav a.navlink.active{background:rgba(255,255,255,.12);color:#fff;}
.dcrm-nav .spacer{flex:1;}
.dcrm-nav .user{color:#bcbcbc;font-size:.85rem;}

/* Content container – fluid, no max width on large screens */
.dcrm-container{max-width:none;margin:1.5rem auto;padding:0 2rem;}
td.actions, th.actions{white-space:nowrap;text-align:right;min-width:130px;width:1%;}
td.actions > div{display:flex;justify-content:flex-end;gap:.25rem;flex-wrap:nowrap;}
.table{font-size:.92rem;}
.table td, .table th{padding:.55rem .6rem;}
.page-title{font-size:1.75rem;font-weight:500;margin-bottom:1.25rem;letter-spacing:.3px;}
.page-title .btn{float:right;}

/* Cards */
.card{border:1px solid var(--border);border-radius:10px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.02);}
.card-header{background:transparent;border-bottom:1px solid var(--border);font-weight:500;}

/* Tables */
.table{background:#fff;}
.table thead th{background:#fafafa;text-transform:uppercase;font-size:.72rem;letter-spacing:1px;color:var(--muted);border-bottom:2px solid var(--border);}
.table td,.table th{vertical-align:middle;}

/* Transport icon */
.tr-icon{display:inline-block;font-size:1.05rem;line-height:1;margin-right:.15rem;vertical-align:-2px;}

/* Status pills */
.status{display:inline-block;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;padding:.25rem .55rem;border-radius:20px;color:#fff;font-weight:500;}
.status.yellow{background:var(--yellow);color:#3a3a3a;}
.status.blue  {background:var(--blue);}
.status.green {background:var(--green);}
.status.gray  {background:#9aa0a6;}

/* Order row bg tint */
tr.row-yellow>td{background:rgba(244,197,66,.08);}
tr.row-blue  >td{background:rgba(62,106,225,.07);}
tr.row-green >td{background:rgba(18,187,106,.07);}

/* Buttons – Tesla squared pills */
.btn{border-radius:6px;font-weight:500;letter-spacing:.4px;padding:.5rem 1.1rem;}
.btn-primary{background:var(--brand);border-color:var(--brand);}
.btn-primary:hover{background:#000;border-color:#000;}
.btn-danger{background:var(--brand-accent);border-color:var(--brand-accent);}
.btn-outline-primary{color:var(--brand);border-color:var(--brand);}
.btn-outline-primary:hover{background:var(--brand);color:#fff;}

/* Forms */
.form-label{font-size:.82rem;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;}
.form-control,.form-select{border-radius:6px;border:1px solid var(--border);padding:.55rem .75rem;}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 .15rem rgba(23,26,32,.08);}
.required::after{content:" *";color:var(--brand-accent);}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#fff;}
.login-box{width:100%;max-width:380px;padding:2rem;}
.login-box .brand{font-size:1.5rem;font-weight:500;letter-spacing:2px;text-align:center;margin-bottom:2rem;}
.login-box .brand span{color:var(--brand-accent);}

/* Dashboard tiles */
.tile{display:block;padding:1.5rem;border-radius:10px;background:#fff;border:1px solid var(--border);}
.tile:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06);text-decoration:none;}
.tile .num{font-size:2.2rem;font-weight:500;color:var(--ink);line-height:1;}
.tile .lbl{color:var(--muted);font-size:.75rem;letter-spacing:1.3px;text-transform:uppercase;margin-top:.5rem;}

/* Responsive tweaks for iPad */
@media (max-width: 1024px){
  .dcrm-container{margin:1rem auto;}
  .dcrm-nav{flex-wrap:wrap;gap:.5rem;}
  .dcrm-nav a.navlink{font-size:.85rem;}
}