:root{
  --bg:#f6f8fa;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#2563eb;
  --danger:#ef4444;
  --success:#10b981;
  --maxwidth:1100px;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; margin:0;background:var(--bg);color:#111}
.container{max-width:var(--maxwidth);margin:24px auto;padding:0 16px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--card);border-bottom:1px solid #e6e9ef}
/* fixed global header */
body.has-topbar{padding-top:64px}
.topbar{position:fixed;top:0;left:0;right:0;height:56px;z-index:40}
.topbar .brand a{font-weight:700;color:var(--accent);text-decoration:none}
.main-nav{display:flex;gap:12px;margin-left:12px}
.main-nav a{color:#111;padding:6px 8px;border-radius:6px;text-decoration:none}
.main-nav a:hover{background:#f1f5f9}
.card{background:var(--card);padding:16px;margin-bottom:16px;border-radius:6px;box-shadow:0 1px 2px rgba(16,24,40,0.03)}
label{display:block;margin:8px 0;font-size:14px;color:var(--muted)}
input[type="text"],input[type="email"],input[type="password"],input[type="date"],select,textarea{
  width:100%;padding:8px;border:1px solid #e6e9ef;border-radius:6px;background:#fff
}
button{background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer}
button[disabled]{opacity:0.6;cursor:not-allowed}
.error{color:var(--danger);margin-top:8px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.top-actions{display:flex;gap:8px;align-items:center}
#todos-list .todo,#tickets-list .ticket,#quotations-list .quotation{border:1px solid #e6e9ef;padding:8px;border-radius:6px;margin-bottom:8px}
small.muted{color:var(--muted)}
a{text-decoration:none;color:var(--accent)}

/* Zebra striping for ticket and quotation lists: odd = white, even = light blue */
#tickets-list .ticket:nth-child(odd), #quotations-list .quotation:nth-child(odd) { background: #fff; }
#tickets-list .ticket:nth-child(even), #quotations-list .quotation:nth-child(even) { background: #eef7ff; }

/* List row columns for tickets/quotations */
.list-row{display:grid;grid-template-columns:1fr 220px 160px;gap:12px;align-items:center;padding:10px;border-radius:6px;margin-bottom:8px;border:1px solid #e6e9ef;background:#fff}
.list-row .item-col{display:flex;flex-direction:column}
.list-row .col-main{cursor:pointer}
.list-row .small-desc{font-size:13px;color:var(--muted);margin-top:4px}
.list-row .col-client{font-size:14px}
.list-row .col-meta{text-align:right;font-size:13px;color:var(--muted)}

/* Header for sortable lists */
.list-header{display:grid;grid-template-columns:1fr 220px 160px;gap:12px;align-items:center;padding:8px;margin-bottom:8px}
.list-header .item-col{font-weight:700}
.list-header .sort:hover{background:#fafafa;border-radius:4px}
.sort-indicator{margin-left:6px;color:var(--muted)}

/* Responsive adjustments */
@media (max-width: 900px) {
  .list-row, .list-header { grid-template-columns: 1fr 160px 120px; }
  .month-cell{min-height:72px}
}

@media (max-width: 640px) {
  /* Stack columns on small screens */
  .list-row, .list-header { display:flex;flex-direction:column;gap:6px }
  .list-row .col-meta, .list-row .col-client { text-align:left }
  .list-row { padding:12px }
  /* Make month grid smaller and cells tighter */
  .month-grid { gap:4px }
  .month-cell{min-height:64px;padding:6px}
  .weekday-row{display:none}
  .month-header{font-size:18px}
  /* Topbar: collapse nav into a simple menu button */
  .topbar{height:auto;padding:8px 12px;display:flex;flex-direction:column;align-items:stretch}
  .topbar .brand{display:flex;justify-content:space-between;align-items:center}
  .main-nav{display:none;flex-direction:column;gap:6px;margin-top:8px}
  .main-nav.open{display:flex}
  /* Top actions stack */
  .top-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
}

/* Ensure modal full-screen on narrow devices */
@media (max-width: 480px) {
  .modal{border-radius:0;margin:0;width:100%;height:100%;max-height:100%;overflow:auto}
  .modal .modal-footer{position:fixed;left:0;right:0;bottom:0;padding:12px;background:#fff}
}

/* Tabs and dashboard styles */
.tab-buttons{display:flex;gap:8px;margin-bottom:12px}
.tab-buttons button{padding:8px 12px;border-radius:6px;border:1px solid #e6e9ef;background:#fff;cursor:pointer}
.tab-buttons button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.color-badge{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:8px;vertical-align:middle;border:1px solid rgba(0,0,0,0.06)}
.user-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #f1f5f9}
.tab-panel .card{box-shadow:none;padding:8px}

/* stat blocks for dashboard */
.stat-block{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;border-radius:8px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 6px 18px rgba(2,6,23,0.06);border:1px solid #eef6ff}
.stat-value{font-size:28px;font-weight:700;color:var(--accent)}
.stat-label{font-size:13px;color:var(--muted);margin-top:6px}

/* Calendar event color bar */
.event-card{border-left:6px solid var(--accent);padding-left:10px}

/* Calendar styles */
.calendar-controls{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.calendar-view{display:block}
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.month-cell{background:#fff;border-radius:6px;min-height:90px;padding:8px;border:1px solid #eef2f7;display:flex;flex-direction:column}
.month-cell.other-month{opacity:0.45}
.month-cell .date{font-size:18px;font-weight:700;color:#111;margin-bottom:6px}
.month-header{font-size:20px;font-weight:700;text-align:center;margin-bottom:8px}
.weekday-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.weekday-cell{text-align:center;font-size:13px;color:var(--muted);padding:6px 0}

.week-view{display:flex;gap:8px}
.week-col{flex:1;background:#fff;padding:8px;border-radius:6px;border:1px solid #eef2f7;display:flex;flex-direction:column}
.week-day{text-align:center;font-weight:700;color:var(--muted)}
.week-daynum{text-align:center;font-size:18px;font-weight:700;margin-bottom:6px}
.event-pill{display:block;background:#f8fafc;border-radius:6px;padding:4px 6px;margin-bottom:4px;color:#111;cursor:pointer;border-left:4px solid var(--accent)}
.week-view,.day-view{background:#fff;padding:8px;border-radius:6px;border:1px solid #eef2f7}
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.5);display:flex;align-items:center;justify-content:center}
.modal{background:#fff;padding:16px;border-radius:8px;max-width:720px;width:100%;max-height:calc(100vh - 80px);overflow:auto;margin:16px}

/* Modal button styles: primary (accent), danger (red), default (white with black text) */
.modal button{background:#fff;color:#000;border:1px solid #e6e9ef;padding:8px 12px;border-radius:6px;cursor:pointer}
.modal button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.modal button.danger{background:var(--danger);color:#fff;border-color:var(--danger)}

/* Sticky footer inside modal so action buttons remain visible while scrolling */
.modal .modal-footer{position:sticky;bottom:0;padding:12px 0 0;margin-top:12px;display:flex;gap:8px;justify-content:flex-end;background:linear-gradient(180deg, rgba(255,255,255,0), #fff);}