/*
  Fil: frontend/assets/css/style.css
  Syfte: Generella, funktionsbaserade stilmallar för Arbitype-projektet.
*/
/* PATCH: placeholder styling for editable object titles */

/* =======================================
   0) Grundinställningar & Box-sizing
======================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: Open Sans, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #F7F3E3;
  color: #4B3B2F;
  line-height: 1.6;
}

/* =======================================
   Länkar (Global Link Styles)
======================================= */
a:link {
  color: #808080;
  text-decoration: none;
}
a:visited {
  color: #505050;
  text-decoration: none;
}
a:hover,
a:active {
  text-decoration: underline;
}

/* =======================================
   1) Containers och Layout
======================================= */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  background-color: #fff;
  flex-grow: 1;
}

@media (min-width: 768px) {
  .content {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
}

.section {
  padding: 1rem 0;
}

/* =======================================
   1A) Radcontainrar (Row Containers)
======================================= */
/* Generell radcontainer för flexibel radlayout */
.row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* =======================================
   2) Fot (Footer) — topbar är BORTTAGEN
======================================= */
.footer {
  text-align: center;
  background-color: #fff;
  padding: 1rem;
  border-top: 1px solid #e0e0e0;
}

/* =======================================
   3) Typografi och Rubriker
======================================= */
.heading {
  font-size: 1.5rem;
  color: #D4A517;
  text-align: center;
  margin: 1rem 0;
}

.subheading {
  font-size: 1.2rem;
  color: #4B3B2F;
  margin: 0.5rem 0;
}

.selected {
  font-size: 1.4rem;
  font-weight: 500;
  color: #999;
}

.holiday-text {
  color: #d00;
}

/* =======================================
   Logotyper
======================================= */

.logo {
  max-width: 80px;
  margin: 0 auto 1rem;
}

/* =======================================
   Objekt och Objekt-header
======================================= */

/* Normal objekt */
.object {
  background-color: #fff;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
}

/* Ikon i normalt objekt (t.ex. 30×30) */
.object .icon {
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
}

/* Kompakt objekt */
.object--compact {
  display: flex;
  align-items: center;
  background: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.object--compact .icon {
  width: 20px;
  height: 20px;
  margin-right: 0.3rem;
}

/* Otillgängliga objekt */
.object--unavailable {
  color: #777;
  opacity: 0.7;
  pointer-events: none;
}
.object--unavailable::before {
  content: '🚫';
  margin-right: 0.25rem;
}
.object--unavailable .icon {
  filter: grayscale(100%);
  opacity: 0.6;
}

/* Stor objekt (till aktuellt objekt som visas på sida) */
.object--large {
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.object--large .icon {
  width: 60px;
  height: 60px;
  margin-right: 0.5rem;
}

/* Objekt-header */
.object-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.object-header .heading {
  margin: 0;
}

/* PATCH: placeholder styling for editable object titles */
#object-title[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #AAA;
}

.title-hint {
  font-size: 0.8em;
  color: #888;
  margin-top: 0.5rem;
}

/* Länkar i objekt */
.object a,
.object--compact a,
.object--large a {
  color: #D4A517;
  text-decoration: none;
}

.object a:hover,
.object--compact a:hover,
.object--large a:hover {
  text-decoration: underline;
}

/* =======================================
   6) Knappar
======================================= */
button {
  padding: 0.2em 0.4em;
  font-size: 0.8em;
  border: 1px solid #888;
  background-color: #f0f0f0;
  color: #000;
  cursor: pointer;
  border-radius: 0; /* Rektangulära hörn */
}

button:hover {
  background-color: #e0e0e0;
}

button:active {
  border-style: inset;
}

.button {
  display: inline-block;
  padding: 0.8rem 1rem;
  font-size: 1em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

.button--primary {
  color: #fff;
  background-color: #D4A517;
}
.button--primary:hover {
  background-color: #B38C13;
}

.button--danger {
  background-color: #c33;
  color: #fff;
}
.button--danger:hover {
  background-color: #a00;
}

/* =======================================
   7) Formulär
======================================= */
.form-container {
  max-width: 350px;
  width: 100%;
  background-color: #fff;
  padding: 1.5rem 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: center;
  margin: 0 auto;
}

.form-container .logo {
  max-width: 80px;
  margin: 0 auto 1rem;
}

.form-container h1 {
  margin-bottom: 1rem;
  font-size: 1.3em;
  color: #D4A517;
}

.form-container form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: left;
}

.form-container label {
  font-size: 0.9em;
  color: #7A6A4F;
  margin-bottom: 0.3em;
}

.form-container input[type="text"],
.form-container input[type="password"],
.form-container input[type="email"],
.form-container input[type="number"],
.form-container input[type="search"],
.form-container input[type="tel"],
.form-container select,
.form-container textarea {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  color: #000;
  background-color: #E8F0FE;
}

.form-container input::placeholder,
.form-container textarea::placeholder {
  color: #AAA;
  font-size: 0.9em;
}

.form-container input:-webkit-autofill,
.form-container input:-webkit-autofill:hover,
.form-container input:-webkit-autofill:focus {
  -webkit-appearance: none;
  -webkit-text-fill-color: #000;
  transition: background-color 99999s ease-in-out 0s;
}

.form-container button[type="submit"] {
  width: 100%;
  margin-top: 0.5rem;
}

.form-message {
  margin-top: 10px;
  min-height: 1.5em;
  font-weight: 500;
  text-align: center;
}

.form-footer {
  margin-top: 15px;
  text-align: center;
  font-size: 0.9em;
}
.form-footer a {
  color: #D4A517;
  text-decoration: underline;
}

/* =======================================
   8) Kort och Brickor (Cards)
======================================= */
/* Grundläggande kort med vit bakgrund */
.card {
  background-color: #fff;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Modifierare för transparent kort */
.card--transparent {
  background-color: transparent;
  border: none;
  box-shadow: none;
  /* Justera padding om behov finns – exempelvis: */
  /* padding: 0; */
}

/* =======================================
   9) Listor
======================================= */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

/* =======================================
   10) Accordion
======================================= */
.accordion {
  margin: 0;
  padding: 0;
  list-style: none;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
  margin-bottom: 1rem;
}

.accordion-header {
  margin: 0;
  padding: 1rem;
  font-size: 1rem;
  font-weight: bold;
  background-color: #f7f3e3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
}

.accordion-header:hover {
  background-color: #e6dbc8;
}

.accordion-content {
  display: none;
  padding: 1rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.accordion-content.open {
  display: block;
}

/* =======================================
   11) Modalfönster
======================================= */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 400px;
  text-align: center;
  border-radius: 8px;
}
.modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.modal-close:hover,
.modal-close:focus {
  color: black;
  text-decoration: none;
}

/* =======================================
   12) Dividerare
======================================= */
.divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 1rem 0;
}
.divider--double {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 1rem 0;
}

/* =======================================
   13) Fullskärmsläge
======================================= */
.fullscreen {
  width: 100%;
  height: calc(100vh - 100px);
  background-color: transparent;
}

/* =======================================
   14) Loggfeed
======================================= */
.log-feed-item {
  padding: 0.2rem 0;
  border-bottom: 1px solid #ddd;
  font-size: 0.85rem;
  display: flex;
  align-items: baseline; /* Bättre linjejustering mellan ikon och text */
}
.log-feed-icon {
  width: 16px;
  height: 16px;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.event-icon {
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
}
.log-feed-item:last-child {
  border-bottom: none;
}
.log-timestamp {
  color: #888;
  margin-right: 0.5rem;
  white-space: nowrap;
}
.log-message {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-message .object--compact {
  display: inline-flex;
  align-items: baseline;
}

/* PATCH: show zones inline with normal object style */
.zones .object {
  display: inline-flex;
  margin-right: 0.5rem;
  margin-bottom: 0;
}

/* =======================================
   15) Spacing Utility Classes
======================================= */
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 4rem; }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-4 { margin-top: 4rem; }

.ml-1 { margin-left: 1rem; }
.ml-2 { margin-left: 2rem; }

.mr-1 { margin-right: 1rem; }
.mr-2 { margin-right: 2rem; }

.my-2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.my-4 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.ml-auto {
  margin-left: auto;
}

/* -------------------------------
   Heroku-liknande login-form
------------------------------- */
body.login-view {
  background-color: #F7F3E3;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

body.login-view .content {
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.login-view .form-container {
  width: 100%;
  max-width: 340px;
  padding: 2rem;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  text-align: center;
}

body.login-view .form-container .logo {
  max-width: 80px;
  margin-bottom: 1rem;
}

body.login-view .form-container h1 {
  display: none; /* Dölj eventuell rubrik helt */
}

/* DEL: gamla stilar för medlemsradioval */
/* ADD: visa etiketter normalt och ta bort medlemsspecifika regler */

body.login-view .form-container input[type="text"],
body.login-view .form-container input[type="password"] {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #F4F7FB;
  color: #333;
  text-align: left;
}

body.login-view .form-container input::placeholder {
  color: #888;
}

body.login-view .form-container button[type="submit"] {
  width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
  background-color: #D4A517;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

body.login-view .form-container button[type="submit"]:hover {
  background-color: #B38C13;
}

/* ADD: styling for versionslistan i detaljvy */
.version-list {
  border-collapse: collapse;
  width: 100%;
  /* ADD: ge luft under versionshistorien */
  margin-bottom: 1rem;
}

.version-list th,
.version-list td {
  padding: 0.25rem 0.5rem;
}

.version-list .current {
  font-weight: bold;
  background-color: #f9f9f9;
}

/* ----------------------------------
   Login option boxes
---------------------------------- */
#login-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.login-box {
  width: 100%;
  max-width: 400px;
  height: 200px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn {
  padding: 0.5rem 1rem;
  background-color: #D4A517;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.link {
  color: #06c;
  margin-top: 0.5rem;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.time-remaining {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #333;
}

.guest-hint {
  font-size: 0.8rem;
  color: #555;
  margin-top: 0.25rem;
}

.new-user-link {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}

/* ----------------------------------
   Accessibility helpers
---------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}