/* Portmak Teknik Servis - Compact UI */
:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.10);
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --shadow:0 10px 24px rgba(15,23,42,.08);
  --radius:14px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(37,99,235,.10), transparent 55%),
              radial-gradient(1000px 500px at 80% 10%, rgba(14,165,233,.10), transparent 55%),
              var(--bg);
  color:var(--text);
}

a{color:var(--primary); text-decoration:none}
a:hover{opacity:.9}

header{
  background:#111;
  color:#fff;
  padding:10px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
header a{color:#fff; opacity:.9}
header a:hover{opacity:1}

.topbar .brand{font-weight:700; letter-spacing:.2px}
.topbar .topnav{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.topbar .topuser{opacity:.85; font-size:13px}
.topbar .nav-dd{position:relative}
.topbar .nav-dd>summary{list-style:none; cursor:pointer; opacity:.9}
.topbar .nav-dd>summary::-webkit-details-marker{display:none}
.topbar .nav-dd[open] .nav-dd-menu{display:block}
.topbar .nav-dd-menu{display:none; position:absolute; right:0; margin-top:10px; min-width:240px; background:#fff; color:#0f172a; border:1px solid rgba(15,23,42,.10); border-radius:12px; box-shadow:0 10px 24px rgba(15,23,42,.08); padding:10px; z-index:999;}
.topbar .nav-dd-item{display:block; padding:8px 10px; border-radius:10px; text-decoration:none; color:#0f172a;}
.topbar .nav-dd-item:hover{background:rgba(15,23,42,.06)}
.topbar .nav-dd-sep{height:1px; background:rgba(15,23,42,.10); margin:10px 0;}

.wrap{max-width:1400px; margin:14px auto; padding:0 12px}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow);
  margin:12px 0;
}

.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:12px}
.col3{grid-column:span 3}
.col4{grid-column:span 4}
.col6{grid-column:span 6}
.col12{grid-column:span 12}

@media (max-width:900px){
  .col3,.col4,.col6{grid-column:span 12}
}

.muted{color:var(--muted)}
hr.soft{border:0; height:1px; background:var(--border); margin:12px 0}

input,select,textarea{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  outline:none;
}
textarea{min-height:90px}

button,.btn{
  display:inline-block;
  padding:8px 12px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color:#fff;
  font-weight:700;
  box-shadow:0 8px 18px rgba(37,99,235,.18);
}

table{width:100%; border-collapse:collapse}
th,td{padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; font-size:13px}
thead th{background:rgba(15,23,42,.03); color:var(--muted); font-weight:800}
tr:hover td{background:rgba(15,23,42,.03)}
.btn-secondary{
  background: #475569 !important;
  box-shadow:none !important;
}
button:hover,.btn:hover{transform:translateY(-1px)}
button:active,.btn:active{transform:none}


.pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.03);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

/* Legacy small label */
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.03);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

/* Status badges (price quotes, service statuses, etc.) */
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}
.status-badge::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background: currentColor;
  opacity:.85;
}
.status-draft{background:rgba(100,116,139,.10); color:#475569; border-color:rgba(100,116,139,.25)}
.status-sent{background:rgba(37,99,235,.10); color:#1d4ed8; border-color:rgba(37,99,235,.25)}
.status-approved{background:rgba(34,197,94,.12); color:#15803d; border-color:rgba(34,197,94,.28)}
.status-rejected{background:rgba(239,68,68,.12); color:#b91c1c; border-color:rgba(239,68,68,.28)}
.status-revision{background:rgba(245,158,11,.14); color:#b45309; border-color:rgba(245,158,11,.32)}
.status-cancelled{background:rgba(148,163,184,.14); color:#64748b; border-color:rgba(148,163,184,.30)}

.btn-danger{
  background: #dc2626 !important;
  box-shadow:none !important;
}

.big-num{font-size:34px; font-weight:900; line-height:1.05; margin-top:6px}


/* Alerts (customer UX) */
.alert { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,.08); }
.alert-success { }
.alert-warning { }
.alert-danger { }

/* === Header actions notification badge === */
.action-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#dc3545;
  color:#fff;
  font-weight:800;
  font-size:12px;
  line-height:1;
}
/* === End header actions badge === */