/* ============================================================
   SEIRI – Praktikum
   Dark, professional theme (overrides Bulma defaults).
   Accent: cool blue-grey #7aa2f7.
   ============================================================ */

:root {
  --seiri-bg:            #0f131a;   /* page background         */
  --seiri-panel:         #1a212c;   /* panels / navbar         */
  --seiri-panel-2:       #202936;   /* slightly lighter        */
  --seiri-hover:         #273244;   /* row hover               */
  --seiri-border:        #2b3546;   /* borders                 */
  --seiri-text:          #e7ebf2;   /* primary text            */
  --seiri-text-dim:      #9aa7bd;   /* secondary text          */
  --seiri-accent:        #7aa2f7;   /* accent colour           */
  --seiri-accent-strong: #93b4ff;   /* accent on hover         */
  --seiri-on-accent:     #0e1420;   /* text on accent          */
}

/* ---------- Page background & text ---------- */
html,
body {
  background-color: var(--seiri-bg);
  color: var(--seiri-text);
}

::selection {
  background: var(--seiri-accent);
  color: var(--seiri-on-accent);
}

/* ---------- Links ---------- */
a {
  color: var(--seiri-accent);
}
a:hover {
  color: var(--seiri-accent-strong);
}

/* ---------- Headings / text ---------- */
.title {
  color: var(--seiri-text);
}
.subtitle {
  color: var(--seiri-text-dim);
}

/* ---------- Navigation (navbar) ---------- */
.navbar.is-primary {
  background-color: var(--seiri-panel);
  border-bottom: 1px solid var(--seiri-border);
}
.navbar-menu {
  background-color: var(--seiri-panel);
}
.navbar-item {
  color: var(--seiri-text);
}
.navbar-item:hover,
.navbar-item:focus {
  background-color: var(--seiri-panel-2);
  color: var(--seiri-text);
}
.navbar-brand .navbar-item {
  color: var(--seiri-accent-strong);
}
.navbar-burger span {
  background-color: var(--seiri-text);
}

/* ---------- Hero (home page header) ---------- */
.hero.is-primary {
  background-color: var(--seiri-panel);
  background-image: linear-gradient(180deg, #1c2532, #151b25);
  color: var(--seiri-text);
}
.hero.is-primary .title {
  color: var(--seiri-text);
}
.hero.is-primary .subtitle {
  color: var(--seiri-text-dim);
}

/* ---------- Buttons ---------- */
.button.is-primary {
  background-color: var(--seiri-accent);
  border-color: var(--seiri-accent);
  color: var(--seiri-on-accent);
}
.button.is-primary:hover,
.button.is-primary:focus {
  background-color: var(--seiri-accent-strong);
  border-color: var(--seiri-accent-strong);
  color: var(--seiri-on-accent);
}
.button.is-light {
  background-color: transparent;
  border: 1px solid var(--seiri-border);
  color: var(--seiri-text);
}
.button.is-light:hover,
.button.is-light:focus {
  background-color: var(--seiri-panel-2);
  border-color: var(--seiri-border);
  color: var(--seiri-text);
}
/* outlined variant (the "Details" button in the list) */
.button.is-primary.is-outlined {
  background-color: transparent;
  border: 1px solid var(--seiri-accent);
  color: var(--seiri-accent);
}
.button.is-primary.is-outlined:hover {
  background-color: var(--seiri-accent);
  border-color: var(--seiri-accent);
  color: var(--seiri-on-accent);
}

/* ---------- Panels & cards ---------- */
.box {
  background-color: var(--seiri-panel);
  border: 1px solid var(--seiri-border);
  color: var(--seiri-text);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* ---------- Forms ---------- */
.field .label {
  color: var(--seiri-text);
}

/* Project requirement: text fields are ALWAYS white with black text. */
.input,
.textarea,
.select select {
  background-color: #ffffff !important;
  color: #16181d !important;
  border: 1px solid #c6ceda !important;
}
.input::placeholder,
.textarea::placeholder {
  color: #7c8798;
  opacity: 1;
}
.input:hover,
.textarea:hover,
.select select:hover {
  border-color: #9aa7b8 !important;
}
.input:focus,
.textarea:focus,
.select select:focus {
  background-color: #ffffff !important;
  color: #16181d !important;
  border-color: var(--seiri-accent) !important;
  box-shadow: 0 0 0 2px rgba(122, 162, 247, 0.35) !important;
}

/* ---------- Tables ---------- */
.table {
  background-color: var(--seiri-panel);
  color: var(--seiri-text);
}
.table th,
.table td {
  border-color: var(--seiri-border);
  color: var(--seiri-text);
}
.table th {
  color: var(--seiri-text-dim);
  font-weight: 600;
}
.table.is-striped tbody tr:nth-child(even) {
  background-color: var(--seiri-panel-2);
}
.table.is-hoverable tbody tr:hover {
  background-color: var(--seiri-hover);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb a {
  color: var(--seiri-accent);
}
.breadcrumb li.is-active a {
  color: var(--seiri-text-dim);
}

/* ---------- Notifications (flash) ---------- */
.notification.is-success {
  background-color: #16271f;
  border: 1px solid #2c4a3b;
  color: var(--seiri-text);
}
.notification.is-danger {
  background-color: #311d22;
  border: 1px solid #5c333e;
  color: var(--seiri-text);
}
.notification.is-info {
  background-color: #17233a;
  border: 1px solid #2c4167;
  color: var(--seiri-text);
}
.notification .delete {
  background-color: rgba(255, 255, 255, 0.35);
}
.notification .delete::before,
.notification .delete::after {
  background-color: var(--seiri-text);
}

/* ---------- Warning notification ---------- */
.notification.is-warning {
  background-color: #332a12;
  border: 1px solid #6b5826;
  color: var(--seiri-text);
}

/* ---------- Status tags ---------- */
.tag.status-tag {
  background-color: rgba(122, 162, 247, 0.16);
  border: 1px solid rgba(122, 162, 247, 0.55);
  color: #adc5ff;
  font-weight: 600;
}

/* ---------- Danger button (delete status) ---------- */
.button.is-danger.is-outlined {
  background-color: transparent;
  border: 1px solid var(--seiri-danger, #f07178);
  color: #f6a4aa;
}
.button.is-danger.is-outlined:hover {
  background-color: #5c2b33;
  border-color: #f07178;
  color: #ffd7da;
}

/* ---------- Text wrapping (cover letter) ---------- */
.pre-wrap {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- No-wrap (dates / action buttons) ---------- */
.nowrap {
  white-space: nowrap;
}

/* ---------- Recruitment tags ("looking for someone?") ---------- */
.tag.recruitment-tag.looking {
  background-color: rgba(94, 204, 138, 0.16);
  border: 1px solid rgba(94, 204, 138, 0.55);
  color: #9fe8bd;
}
.tag.recruitment-tag.no {
  background-color: rgba(148, 160, 180, 0.14);
  border: 1px solid rgba(148, 160, 180, 0.5);
  color: #c3cddd;
}
.tag.recruitment-tag.unknown {
  background-color: rgba(230, 190, 110, 0.16);
  border: 1px solid rgba(230, 190, 110, 0.55);
  color: #f4d9a0;
}


/* ---------- Admin tabs ---------- */
.tabs ul {
  border-bottom-color: var(--seiri-border);
}
.tabs a {
  color: var(--seiri-text-dim);
  border-bottom-color: var(--seiri-border);
}
.tabs a:hover {
  color: var(--seiri-text);
  border-bottom-color: var(--seiri-border);
}
.tabs li.is-active a {
  color: var(--seiri-accent);
  border-bottom-color: var(--seiri-accent);
}
.tabs.is-boxed a {
  background-color: transparent;
  border: 1px solid var(--seiri-border);
}
.tabs.is-boxed a:hover {
  background-color: var(--seiri-panel-2);
}
.tabs.is-boxed li.is-active a {
  background-color: var(--seiri-panel-2);
  border-color: var(--seiri-border);
  border-bottom-color: transparent;
  color: var(--seiri-accent);
}