/* Autostream shared styles
   Place: /var/www/autostream/assets/app.css
*/

:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #666666;

  --card-bg: #fafafa;
  --border: #dddddd;

  --table-head: #f5f5f5;

  --btn-bg: #ffffff;
  --btn-border: #333333;

  --primary: #111111;
  --primary-text: #ffffff;

  --warn-bg: #fff3cd;
  --warn-border: #c9a800;

  --danger-bg: #ffe7e7;
  --danger-border: #cc4444;

  --ok-bg: #eaffea;
  --ok-border: #7acb7a;

  --err-bg: #ffe7e7;
  --err-border: #d68686;

  --pill-bg: #eeeeee;

  --input-bg: #ffffff;
  --input-border: #cccccc;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f1115;
    --text: #e7e7ea;
    --muted: #a0a3ad;

    --card-bg: #161922;
    --border: #2a2f3b;

    --table-head: #1b1f2a;

    --btn-bg: #161922;
    --btn-border: #3a4152;

    --primary: #e7e7ea;
    --primary-text: #0f1115;

    --warn-bg: #2a2410;
    --warn-border: #a88900;

    --danger-bg: #2a1414;
    --danger-border: #b94a4a;

    --ok-bg: #142a18;
    --ok-border: #49b468;

    --err-bg: #2a1414;
    --err-border: #b25c5c;

    --pill-bg: #232836;

    --input-bg: #0f1115;
    --input-border: #3a4152;
  }
}

/* base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
  margin: 20px;
  background: var(--bg);
  color: var(--text);
}

a{ color: inherit; }
h1,h2,h3{ line-height:1.2; }

.muted{ color: var(--muted); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.nowrap{ white-space: nowrap; }
.hidden{ display:none !important; }

/* layout helpers */
.wrap{
  width: min(80%, 1600px);
  margin: 0 auto;
}
@media (max-width: 900px){
  .wrap{ width: 96%; }
}

.row{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}
.topbar{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.card{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--card-bg);
}

/* messages */
.msg{
  padding: 10px;
  border-radius: 10px;
  margin: 0 0 12px 0;
}
.msg-ok{ background: var(--ok-bg); border: 1px solid var(--ok-border); }
.msg-err{ background: var(--err-bg); border: 1px solid var(--err-border); }

/* tables */
table{ border-collapse: collapse; width: 100%; }
th,td{
  border: 1px solid var(--border);
  padding: 10px;
  vertical-align: top;
}
th{
  background: var(--table-head);
  text-align: left;
}

/* pills / badges */
.pill{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: 12px;
}

/* buttons */
.btn{
  display:inline-block;
  padding: 7px 10px;
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  text-decoration:none;
  margin-right: 6px;
  background: var(--btn-bg);
  cursor: pointer;
}
.btn:hover{ filter: brightness(1.05); }
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--primary);
  color: var(--primary-text);
  border-color: var(--primary);
}
.btn-secondary{
  background: var(--btn-bg);
  border-color: var(--btn-border);
}
.btn-warn{
  background: var(--warn-bg);
  border-color: var(--warn-border);
}
.btn-danger{
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

/* form */
label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
input[type="text"],
input[type="date"],
select,
textarea{
  width: 100%;
  padding: 10px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
}
textarea{ min-height: 90px; resize: vertical; }

.col{ flex:1; min-width: 240px; }
.col-sm{ min-width: 180px; flex: 0 0 180px; }

/* day checkboxes layout (add/edit) */
.days{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
}
.day{
  display:flex;
  gap: 6px;
  align-items:center;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--btn-bg);
}

/* add.php / pool.php helper classes */
.top{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.crumb{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin: 0 0 12px 0;
}
.browser{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 840px){
  .browser{ grid-template-columns: 1fr; }
}
.panel{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--card-bg);
}
.list{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.item{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--btn-bg);
}
.badge{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: 12px;
  white-space: nowrap;
}
.filelist{
  max-height: 320px;
  overflow:auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: var(--btn-bg);
}

/* --- Fix for lange filstier i tabeller --- */
.table-wrap{
  width: 100%;
  overflow-x: auto;
}

table{
  table-layout: fixed; /* gør at lange celler ikke skubber hele tabellen ud */
}

th, td{
  overflow-wrap: anywhere; /* bryd lange ord/stier */
  word-break: break-word;
}

td.mono, .mono{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --- Små felter skal ikke være kæmpe --- */
.col-tight{
  flex: 0 0 auto !important;
  min-width: unset !important;
}

.input-sm{ width: 140px !important; }
.seq-input{ width: 60px !important; }
.weight-input{ width: 80px !important; }

/* tabel-celler med knapper */
.td-actions{
  white-space: nowrap;
  width: 170px;
}

#yt_urls{ min-height: 70px; }