/* ---------------------------------
   Utility
---------------------------------- */
.is-hidden{display:none !important;}

/* Make clickable table rows feel interactive (used for tasks) */
tr.table-row-link{cursor:pointer;}
tr.table-row-link:hover > td{background:rgba(0,0,0,0.03);}

/* AtSeaUI Components – unified UX layer */
:root{
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;
  --border-color:rgba(17,24,39,.12);
  --shadow-soft:0 10px 28px rgba(17,24,39,.08);
  --bg:#f6f7f9;--card:#fff;--text:#0f172a;--muted:#6b7280;
}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-md);border:1px solid var(--border-color);background:#fff;color:var(--text)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-text,#fff)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-primary:active{background:var(--primary-active)}
.input,input,select,textarea{padding:8px 10px;border-radius:var(--radius-md);border:1px solid var(--border-color)}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-weak);outline:none}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th{font-size:12px;color:var(--muted);padding:10px}
.table td{padding:10px;border-top:1px solid var(--border-color)}
.table tr:hover{background:var(--primary-soft)}
.card{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:16px}
.badge{padding:4px 8px;border-radius:999px;font-size:12px}
.badge-primary{background:var(--primary-weak);color:var(--primary)}


/* ---------------------------------
   Modal
---------------------------------- */
body.modal-open{overflow:hidden;}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;}
.modal[hidden]{display:none !important;}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.35);backdrop-filter:blur(2px);}
.modal-dialog{position:relative;background:var(--card);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);width:min(720px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-color);}
.modal-head h3{margin:0;font-size:16px;}
.modal-body{padding:16px;}
.modal-grid{display:flex;flex-wrap:wrap;gap:12px;}
.modal-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text);}
.modal-field input,.modal-field select,.modal-field textarea{width:100%;}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}

/* Taken: status select beter leesbaar */
.status-select{
  min-width:110px;
  padding-right:30px;
  white-space:nowrap;
}

.task-status-form{display:flex;gap:6px;align-items:center;}

/* ---------------------------------
   Taken: status badge + autosave
---------------------------------- */
.task-status{display:flex;align-items:center;gap:8px;}

.task-status-badge{
  border:1px solid rgba(17,24,39,.14);
  background:rgba(255,255,255,.9);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
}
.task-status-badge:hover{background:rgba(0,0,0,.03);}

/* Color hints per status */
.task-status-badge.is-open{border-color:rgba(100,116,139,.35);color:#0f172a;background:rgba(148,163,184,.12);}
.task-status-badge.is-in_progress{border-color:rgba(37,99,235,.25);color:#1d4ed8;background:rgba(37,99,235,.10);}
.task-status-badge.is-waiting{border-color:rgba(245,158,11,.28);color:#b45309;background:rgba(245,158,11,.12);}
.task-status-badge.is-done{border-color:rgba(22,163,74,.22);color:#15803d;background:rgba(22,163,74,.12);}

.task-status-select{
  min-width:130px;
  padding:7px 10px;
  font-size:13px;
}
/* simple col helpers inside modal */
.modal-grid .col-12{flex:0 0 100%;}
.modal-grid .col-8{flex:0 0 calc(66.666% - 6px);}
.modal-grid .col-6{flex:0 0 calc(50% - 6px);}
.modal-grid .col-4{flex:0 0 calc(33.333% - 8px);}
@media (max-width:640px){
  .modal-grid .col-8,.modal-grid .col-6,.modal-grid .col-4{flex:0 0 100%;}
}

/* --- Taken: status select readable --- */
.status-select{
  min-width: 110px;
  padding: 8px 10px;
  font-size: 13px;
}
@media (max-width: 640px){
  .status-select{min-width: 96px;}
}