/* ===== RESET & BASE ===== */
.active-link {
    background-color: #e7e7e7; /* ljusblå bakgrund */
    color: #1d4ed8;             /* mörkblå text */
    font-weight: bold;
    border-radius: 4px;
    padding: 0.1rem 0.5rem;}

.delivery-item {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 5px;
  margin-bottom: 2px;
  margin-left: -10px;
  margin-right: -10px;
  border-bottom: 1px solid #ccc;}

.login-links a {
    color: #19768c;
    text-decoration: none;}

.login-links a:hover {
    text-decoration: underline;}

.login-links {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    font-size: 0.85rem;}

.news-list {
    list-style: none;
    padding: 0;}

.sidebar-nav li {
    margin: 1rem 0;}

.sidebar-nav ul li {
    margin: 0.5rem 0;}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;}

.sidebar-nav ul {
    list-style: none;
    padding: 0;}

.status-indicator.offline {
  background-color: gray;}

.status-indicator.online {
  background-color: green;}

.upcoming-delivery-list {
  list-style: none;
  padding: 0;
  margin-top: -5px;}

.user-status-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;}

.user-status-list {
    list-style: none;
    padding: 0;
    margin: 0;}

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f6f9;
  font-size: 90%;}

ul li {
    margin-bottom: 1rem;}

ul {
    list-style: none;
    padding: 0;}

    /* Tooltip-stil */
.sidebar.collapsed .sidebar-nav a[data-tooltip] {
  position: relative;
}

.sidebar.collapsed .sidebar-nav a[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  margin-left: 8px;
  z-index: 999;
}


.sidebar.collapsed .sidebar-nav a[data-tooltip]:hover::after {
  opacity: 1;
}

.checkbox-box[data-tooltip] {
  position: relative;
}

.checkbox-box[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
}

.checkbox-box[data-tooltip]:hover::after {
  opacity: 1;
}

/* ===== LAYOUT ===== */
.news-content {
  white-space: pre-wrap;}

.sidebar-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    background-color: #f3f5f8;}

.sidebar-header h2 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;}

.sidebar-header {
    margin-bottom: 1.5rem;}

.sidebar-logo {
    width: 120px;
    opacity: 0.7;}

.sidebar-nav a {
    color: #333;
    text-decoration: none;}

.sidebar-nav a {
    text-decoration: none;
    color: #222;
    font-weight: 500;
    display: block;
    padding-left: 0.5rem;}

.sidebar-nav a:hover {
    color: #007acc;}

.sidebar-nav a:hover {
    text-decoration: underline;}

.sidebar-nav {
    background-color: #f3f5f8;
    padding: 0.5rem;
    height: 500px;
    color: #222;
    flex-grow: 1;
    white-space: nowrap;
}

.sidebar-profile a {
    color: #ccc;
    font-size: 0.8rem;
    text-decoration: underline;}

.sidebar-profile img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #ddd;}

.sidebar-profile {
    display: flex;
    gap: 0.8rem;
    white-space: nowrap;
    align-items: center;
    margin-bottom: 0.5rem;}

.sidebar-top {
    background-color: #1f1f1f;
    padding: 1rem;
    min-height: 90px;
    color: white;}

/* Huvudinnehåll */
.main-content {
  padding: 1rem;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  transition: margin-left 0.3s;
  margin-left: 0px; /* standardvärde när sidebar är öppen */
}

.zoom {
  zoom: 0.92;
}

#mainProjectCheckboxContainer, #editGroupMainProjectsContainer label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  white-space: nowrap;

}

.admin-mainproject-list {
  grid-column: span 2;
  margin-top: 2rem;
}

.project-filter-buttons a {
    text-decoration: none;
}

.admin-mainproject-list select {
  margin-bottom: 1rem;
}


.sidebar.collapsed ~ .main-content {
  margin-left: 0x;
}

/* Ny wrapper för layout */
.layout-wrapper {
    display: flex;}

/* sidebar */

/*SIDEBAR*/
.sidebar {
    background: #f3f5f8;
    width: 180px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.05);
    position: sticky;
    left: 0;
    top: 0;
    transition: width 0.3s;
}

.sidebar.no-transition {
  transition: none !important;
}

.collapse-sidebar-toggle {
  position: sticky;
  top: 1px; /* Justera vid behov */
  left: 180px; /* Bredden på sidebar */
  height: 80px;
  width: 15px;
  transform: translateX(0);
  background-color: #f3f5f8;
  border: 1px solid #c9c9c9;
  color: #666666;
  border-left: none;
  border-radius: 0 22px 22px 0;
  padding: 6px 8px;
  cursor: pointer;
  z-index: 1001;
  font-size: 8px;
  transition: left 0.3s ease;
}

.no-transition {
  transition: none !important;
}

.sidebar.collapsed ~ .collapse-sidebar-toggle {
  left: 60px; /* Samma som sidebar.collapsed width */
  
}

.sidebar.collapsed .sidebar-profile img {
  display: none;
}

.sidebar.collapsed .sidebar-profile div,
.sidebar.collapsed .text,
.sidebar.collapsed .logout-btn {
  display: none;
}

.sidebar.collapsed {
  width: 60px;
  
}

.sidebar .icon {
  display: inline-block;
  width: 24px;
  text-align: center;
}

.sidebar.collapsed #collapseSidebarBtn {
    left: 10px;
    right: auto;
    transition: width 0.3s;
}

.sidebar.collapsed + .collapse-sidebar-toggle .arrow {
  transform: rotate(180deg);
  transition: width 0.3s;
}

/* ===== LOGIN PAGE ===== */
/* --- Vit bakgrund på sidan --- */
body.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: #fff;
}

/* --- Login-container --- */
.login-container {
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.12);
  overflow: hidden;
  max-width: 460px;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: none;
}

/* --- Headerdel (vit) --- */
.login-card-header {
  background: #fff; 
  text-align: center;
  padding: 28px 24px 20px;
}
.login-logo {
  width: 400px;
  display: block;
  margin: 0 auto 8px;
}
.login-card-header h1 {
  margin: 8px 0 4px 0;
  font-size: 20px;
  color: #333;
}
.login-subtitle {
  margin: 0;
  font-size: 14px;
  color: #555;
}

/* --- Form-del (mörk) --- */
.login-form {
  background: #1f1f1f;     /* 🔥 mörk bakgrund */
  padding: 24px;
  color: #eee;
}
.login-form .form-group {
  margin-bottom: 16px;
}
.login-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #eee;
}
.login-form input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;        /* 🔥 ljusa textfält */
  color: #000;
}
.login-form input:focus {
  outline: none;
  border-color: #19768c;
  box-shadow: 0 0 3px rgba(25, 118, 140, 0.6);
}

/* --- Knapp --- */
.login-btn {
  width: 100%;
  padding: 10px;
  background: #19768c;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}
.login-btn:hover {
  background: #135c6d;
}

/* --- Länkar nederst --- */
.login-links {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  background: #1f1f1f;
  margin-top: 0; 
  padding: 10px;
}
.login-links a {
  color: #bbb;
  text-decoration: none;
}
.login-links a:hover {
  text-decoration: underline;
}

/* --- Felmeddelande --- */
.error-msg {
  padding: 10px;
  background: #ef4444;
  color: #fff;
  text-align: center;
}

/* Vit basbakgrund + mönster */
body.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: #fff; /* fallback ifall bilden inte laddas */
  position: relative;
  z-index: 0;
  overflow: hidden;
}

body.login-page::before {
  content: "";
  position: absolute;
  inset: 0; /* täck hela sidan */
  background: url("/images/pattern.png") repeat;
  opacity: 0.1;   /* 🔥 gör mönstret ~80% synligt */
  z-index: -1;    /* lägg bakom login-rutan */
}



/* ===== CHECKLIST VIEW ===== */
#commentList {
  margin-top: 1rem;
  font-size: 0.9rem;
  list-style: disc;
  padding-left: 1.5rem;}

.checklist-controls input,
.checklist-controls select {
    padding: 0.5rem;
    font-size: 0.95rem;
    border: 1px solid #ccc;
    border-radius: 6px;}

.checklist-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;}

.checklist-controls-card input,
.checklist-controls-card select {
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  min-width: 200px;}

.checklist-table .checkbox {
    text-align: center;
    vertical-align: middle;
    table-layout: fixed;   /* nu respekteras max-width */
  width: 100%;
}

.checklist-table th,
.checklist-table td {
    padding: 0.4rem;
    border: 1px solid #ddd;
    
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    vertical-align: middle;}

.checklist-table th > div,
.checklist-table td > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checklist-table thead th:not(.rotated-header) {
  vertical-align: bottom;}

.checklist-table thead {
  background: linear-gradient(to bottom, #1f1f1f, #3a3a3a); /* mörkgrå till ljusare mörkgrå */
  color: rgb(206, 206, 206);}

.checklist-table {
    width: auto;
    border-collapse: collapse;
    font-size: 0.95rem;}

.checklist-table {
  border-radius: 8px;
  overflow: hidden;}

/* Standard: ellipsis i en fast-breddad cell */
.cell-ellipsis {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;          /* viktigt för "…" */
  text-overflow: ellipsis;   /* visar … */
  cursor: text;
}

/* Aktivt läge (vid klick/fokus): låt texten rulla internt
   så man kan markera hela – men göm scrollbar visuellt */
.cell-ellipsis.active,
.cell-ellipsis:focus {
  overflow-x: auto;          /* möjliggör "osynlig scroll" vid selektion */
  text-overflow: clip;       /* ta bort … */
  outline: none;

  /* Dölj scrollbars i alla motorer */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge (legacy) */
}
.cell-ellipsis.active::-webkit-scrollbar,
.cell-ellipsis:focus::-webkit-scrollbar {
  display: none;             /* Chrome/Safari */
}

.comment-cell {
  padding: 0;
  text-align: center;
  vertical-align: middle;}

.comment-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;}

.small-widget.checklist-card {
  max-width: 450px;}

  .quill-editor {
  max-height: 250px;
  overflow-y: auto;
}

.news-content ul,
.news-content ol {
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.news-content ul li {
  list-style-type: disc;
  margin-left: 1em;
}

.news-content ol li {
  list-style-type: decimal;
  margin-left: 1em;
}

.news-content p {
  margin-bottom: 0.5em;
}

.news-content strong {
  font-weight: bold;
}

.news-content em {
  font-style: italic;
}

.news-content span[style] {
  white-space: pre-wrap;
}

/* Sektion för kontrollpanelen (sök, sortera, lägg till) */
.checklist-controls-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px 24px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  
  gap: 12px;}

/* Yttre kort för hela checklistan */
.checklist-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin-top: 24px;
  min-width: 400px;
  width: fit-content;
  
}


/* ===== DASHBOARD ===== */
.dashboard-card a {
    text-decoration: none;
    color: #0055cc;}

.dashboard-card a:hover {
    text-decoration: underline;}

.dashboard-card ul li {
    margin: 0.5rem 0;}

.dashboard-card {
    background-color: #ffffff;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 0 8px rgba(0,0,0,0.05);
    margin-bottom: 2rem;}

.dashboard-grid {
  display: flex;
  gap: 20px;}

.dashboard-left {
    flex: 2;
    min-width: 300px;}

.dashboard-left {
  flex: 2;}

.dashboard-right {
    flex: 1;
    min-width: 250px;}

.dashboard-right {
  flex: 1;
  display: flex;
  flex-direction: column;}


/* ===== ADMIN PANEL ===== */
.admin-dropdown a.admin-toggle {
    cursor: pointer;
    display: block;
    padding-left: 0.5rem;
    color: #222;
    text-decoration: none;
    font-weight: 500;}

.admin-dropdown a.admin-toggle:hover {
    color: #007acc;}

.admin-dropdown ul {
    padding-left: 1rem;
    margin-top: 0.5rem;}

.admin-group-list {
    flex: 1;
    min-width: 300px;}

.admin-group-list {
    flex: 1;
    min-width: 300px;}

.admin-layout-grid {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: flex-start;}

.admin-layout-grid {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: flex-start;}

.admin-menu ul {
    margin-left: 1rem;}

.admin-news-modal input[name="title"] {
  max-width: 80%;
  width: 100%;
  box-sizing: border-box;}

.admin-submenu {
    margin-top: 0.3rem;
    padding-left: 1rem;}

.admin-submenu.hidden {
    display: none;}

.admin-top-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;}

.admin-top-panel {
    margin-bottom: 2rem;}

.admin-user-list {
    flex: 2;
    min-width: 400px;}

.admin-user-list {
    flex: 2;
    min-width: 400px;}

.modal.admin-news-modal .modal-content {
  max-width: 800px;
  width: 100%;
  box-sizing: border-box;}

.modal.admin-news-modal .textarea-box {
  width: 100%;
  min-height: 150px;}


/* ===== MODALS & OVERLAYS ===== */
#addProjectModal .modal-content {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transform: scale(0.95);
  transition: transform 0.3s ease;}

#addProjectModal.active .modal-content {
  transform: scale(1);}

.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;}

.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    animation: scaleUp 0.2s ease-in-out;}

.modal.hidden {
    display: none;}

.modal.show {
  display: flex;}


/* ===== BUTTONS ===== */
.add-project-btn {
    background-color: #444; /* Mörkgrå */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;}

.add-project-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}

.add-project-btn:hover {
    background-color: #333;
    transform: translateY(-2px);}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  font-size: 14px;}

.btn-tiny {
  padding: 2px 6px;
  font-size: 12px;}

.btn.primary {
  background-color: #2c3e50;
  color: white;}

.btn.primary.hidden {
    display: none;}

.btn.secondary {
  background-color: #bdc3c7;
  color: black;}

.delete-btn {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap; /* 💡 Förhindrar radbrytning */
    height: auto;
    line-height: 1.2;}

.delete-btn:hover {
    background-color: #c0392b;}

.edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 6px;
  font-size: 1em;
  color: #555;}

.login-btn {
    background: #219ebc;
    color: #fff;
    border: none;
    width: 100%;
    padding: 0.7rem;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 1rem;
    transition: background 0.3s;}

.login-btn:hover {
    background: #19768c;}

.logout-btn {
    display: inline-block;
    background: #1f1f1f;
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 1rem;}

.logout-btn:hover {
    background-color: #000;}

.save-btn.hidden {
    display: none;}

.save-btn:hover {
    background-color: #155d15;}

.settings-form .btn {
    margin-top: 1rem;
    padding: 0.5rem 1rem;}

/* Admin-panel */
.save-btn {
    padding: 4px 10px;
    font-size: 13px;
    background-color: #1f7a1f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;}


/* ===== FORMS ===== */
#addUserModal .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    margin-top: 1rem;}

#addUserModal .form-group label {
    margin-bottom: 0.4rem;
    font-weight: bold;
    font-size: 0.95rem;}

#addUserModal .form-group {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;}

#addUserModal input,
#addUserModal select {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;
    width: 100%;
    box-sizing: border-box;}

.filter-controls input,
.filter-controls select {
    padding: 0.4rem;
    font-size: 0.95rem;}

.filter-controls label {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.5rem;}

.form-actions {
  margin-top: 10px; /* justera efter smak */
  display: flex;
  gap: 8px;}

.form-group input {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;}

.form-group {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin-bottom: 1em;
}

.form-group input,
.form-group select {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.form-input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;}

.form-input:focus {
  border-color: #2c3e50;
  box-shadow: 0 0 3px rgba(44, 62, 80, 0.5);}

.settings-form .form-group {
    margin-bottom: 1rem;}

.settings-form input {
    width: 100%;
    padding: 0.5rem;}

.settings-form label {
    display: block;
    margin-bottom: 0.25rem;}

/* ------CHECKLISTA----- */
form#newProjectForm input,
form#newProjectForm button {
    display: block;
    margin: 0.5rem 0;
    padding: 0.5rem;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;}

/* User Settings */

.settings-form {
    max-width: 500px;
    margin-top: 2rem;}

form#newProjectForm button {
    background-color: #0055cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;}

form#newProjectForm button:hover {
    background-color: #003f99;}


/* ===== TABLES ===== */
.table-section-header {
  
  color: rgb(206, 206, 206);
  font-size: 16px;
  padding: 10px 12px;
  text-align: left;}

/* Om du använder <th> för kolumnrubrikerna */
.checkbox-header {
    padding: 2px;
    width: 15px;
    height: 100px;
    text-align: center;}


/* ===== MISC ===== */
#addProjectBtn {
  padding: 10px 16px;
  border: none;
  background-color: #2b2b2b;
  color: white;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  width: fit-content;}

#addProjectBtn:hover {
  background-color: #1b1b1b;}

#addProjectModal.active {
  opacity: 1;
  pointer-events: auto;}

#addProjectModal.hidden {
  display: none;}

#addProjectModal.show {
    display: flex;
    animation: fadeIn 0.2s ease-in-out;}

.alert.error {
    color: red;
    margin-top: 1rem;}

.alert.success {
    color: green;
    margin-top: 1rem;}

.card.news-card h3 {
  margin-top: 0;
  font-size: 18px;}

.card.news-card small {
  display: block;
  margin-top: 10px;
  color: #666;}

.card.news-card {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}

.card.status-card {
  background-color: #303030;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin: -10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}

.checkbox {
    cursor: pointer;}

.checkbox-box {
    width: 16px;
    height: 16px;

    border: 1px solid #888;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
    margin: 0 auto;}

.checkbox-box.state-0 {
    background: transparent;}

.checkbox-box.state-1 {
    background: #38b000; /* Grön */}

.checkbox-box.state-2 {
    background: #ffcc00; /* Gul */}

.checkbox-box.state-3 {
    background: #d90429; /* Röd */}

.checkbox-cell {
    padding: 0px;
    min-width: 20px;
    width: 20px;
    height: 18px;
    text-align: center;}

    .highlight-header {
  background-color: #424d3e;
  color: rgb(255, 255, 255);
}

.checkbox-state {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  cursor: pointer;
  margin: 0 auto;}

.checkboxes {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;}

.divider span {
    background: #fff;
    padding: 0 0.5rem;
    color: #999;
    font-size: 0.85rem;}

.divider {
    margin: 1.5rem 0;
    position: relative;
    text-align: center;}

.divider::after {
    right: 0;}

.divider::before {
    left: 0;}

.divider::before,
.divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background: #ccc;}

.edit-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;}

.filter-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;}


.news-card {
  border-bottom: 1px solid #eee;
  padding-bottom: 12px;
  margin-bottom: 12px;}

.news-card-header {
  background: linear-gradient(to bottom, #1f1f1f, #3a3a3a);
  color: rgb(206, 206, 206);
  padding: 10px 16px;
  font-size: 16px;
  font-weight: normal;
  border-radius: 8px 8px 0 0;
  margin: -17px -17px 17px -17px; /* kompensera för padding på .card */}

.news-card:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;}

.news-header {
  background: linear-gradient(to bottom, #1f1f1f, #3a3a3a);
  color: rgb(206, 206, 206);
  padding: 10px 16px;
  font-size: 18px;
  font-weight: normal;
  border-radius: 8px 8px 0 0;
  margin: 0 -16px 16px -16px; /* sträck till boxkanter men håll positionen */}

.news-item h3 {
    margin: 0 0 0.5rem;}

.news-item {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;}

.news-wrapper {
  background-color: white;
  
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}

.no-wrap {
    white-space: nowrap;}

.profile-card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 1rem;}

.profile-card {
    border: 1px solid #ccc;
    padding: 1rem;
    text-align: center;
    background: #f9f9f9;
    border-radius: 8px;}

.project-address {
min-width: 200px;
max-width: 250px;}

.schaktue-select {
min-width: 130px;}

.project-creator {
min-width: 60px;
}

.project-permit-number {
min-width: 100px;
max-width: 125px;
}

.project-status {
  min-width: 100px;

}

.project-ta-number {
min-width: 100px;
max-width: 125px;
}

.project-comment {
    width: 20px;
min-width: 20px;}

.project-delivery {
min-width: 120px;}

.project-status-stat {
min-width: 120px;}

.project-data {
min-width: 60px;}


.project-number {
  width: 140px;
  max-width: 140px;; /* eller vad som passar din tabell */}

.project-row {
    line-height: 1.1;}

.project-row.status-fakturerad {
  background-color: #b6f2b6; /* klargrön */}

.project-row.status-sammanstallning {
  background-color: #e0f0ff; /* ljusblå */}

.project-row.status-schakt {
  background-color: #e0f7df; /* ljusgrön */}

.project-row.status-teknisk {
  background-color: #d0f0e0; /* mjuk grön */}

.project-row:hover {
    background-color: #e6e6e6; /* ljusgrå bakgrund */
    cursor: default; /* valfritt – gör muspekaren "normal" */}


.project-permit-number,
.project-schaktue,
.project-ta-number{
  min-width: 130px;
  max-width: 130px;
  white-space: nowrap;
  text-align: center;}

.project-start,
.project-schakt-start,
.project-schakt-status,
.project-stop,
.project-schakt-stopp {
  min-width: 100px;
  max-width: 100px;
  white-space: nowrap;
  text-align: center;}


 

.rotated-header span {
    display: block;
    position: absolute;
    bottom: 4px; /* justera uppåt så det inte går ner över checkboxen */
    left: 75%;
    transform: rotate(-90deg);
    transform-origin: bottom left;
    font-size: 14px;
 
    white-space: nowrap;
    letter-spacing: 1px;}

.rotated-header {
    width: 20px;
    height: 140px;
    padding: 0;
    position: relative;
    vertical-align: bottom;
    text-align: left;
    overflow: visible;}

.row-saved {
    animation: savedFlash 1.5s ease;}

.settings-grid {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;}

.settings-left {
    flex: 3;}

.settings-right {
    flex: 2;}

.small-widget {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 7px 12px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  min-height: 100px;
  text-align: left;
  display: block; /* ⬅️ VIKTIGT */}

.social-login button {
    width: 100%;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    background: #fff;
    transition: background 0.3s;}

.social-login button:hover {
    background: #f1f1f1;}

.social-login img {
    width: 20px;
    height: 20px;}

.state-0 { background-color: transparent;}

.state-1 { background-color: green;}

.state-2 { background-color: gold;}

.state-3 { background-color: red;}

.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;}

.textarea-box {
  width: 800px;
  min-height: 150px;
  padding: 10px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  background-color: white;}

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
  color: white;
  background-color: #333; /* standard */}

.toast.error {
  background-color: #e74c3c;
  color: black;}

.toast.info {
  background-color: #3498db;
  color: white;}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);}

.toast.success {
  background-color: #333;
  color: white;}

/* Anpassa kort-stilen för allmän användning */
.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1.5rem;
    margin-bottom: 1.5rem;}

/* Dashboard */

.user-status-item {
  display: flex;
  align-items: center;
  gap: 6px; /* liten spacing mellan boll och namn */}

/* Modal-stil */
#addProjectModal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5); /* mörk overlay */
    justify-content: center;
    align-items: center;
    z-index: 1000;}

/* Planner */

#calendar {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);}

/* Projekt */
.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;}

/* Animation för ljusgrönt flash */
@keyframes savedFlash {
  0%   { background-color: #d4edda; }
  50%  { background-color: #b6dfc4; }
  100% { background-color: transparent; }
}

/* Animation för in-fade */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Animation för uppskalning */
@keyframes scaleUp {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.highlight-move {
  animation: savedFlash 1s ease-in-out;
}


/* === Scrollfix utan att ändra sidebarstruktur === */
.main-content {
  flex-grow: 1;
  min-width: 0;
  overflow: auto;
  padding: 1rem;
}



.table-wrapper {
  width: 100%;
}

.scroll-x {
  overflow-x: auto;
  width: 100%;
}

.checklist-table {
  width: max-content;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.hidden { display: none; }
.collapse-btn { background: none; border: none; cursor: pointer; font-weight: bold; }

/* Gör span klickbart men behåller rubrikstil */
.collapse-btn {
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.permit-col.hidden {
  display: none;
}

/* Planner */



.fc-daygrid-day-number {
  font-size: 12px;
}

.fc-event {
  font-size: 11px;
  padding: 1px 2px;
}

#calendar {
  max-width: 1200px; /* eller 800px / 1000px */
  
}

.fc-daygrid-event {
  margin-top: 2px;
  margin-bottom: 2px;
}

.fc-daygrid-event-dot {
  display: none;
}
.fc-daygrid-event .fc-event-time {
  display: none;
}

.checklist-table th.project-schakt-status,
.checklist-table th.project-schakt-start,
.checklist-table th.project-schakt-stopp,
.checklist-table th.project-start,
.checklist-table th.project-stop,
.checklist-table th.project-permit-number,
.checklist-table th.project-ta-number {
  background-color: #131313; /* ljusgrå */
}


.checklist-table td.project-schakt-status,
.checklist-table td.project-schakt-start,
.checklist-table td.project-schakt-stopp,
.checklist-table td.project-start,
.checklist-table td.project-stop,
.checklist-table td.project-permit-number,
.checklist-table td.project-ta-number {
  background-color: #e7e7e7; /* ljusgrå */
}

/* === Schaktlista layout – kompaktare === */
.schakt-grid {
  display: inline-block;
  grid-template-columns: 1fr 1fr;
  gap: 8px;              /* ↓ från 16px till 8px */
  align-items: start;
}

/* Ta bort extra toppmarginal inne i grid-korten */
.schakt-grid .checklist-card {
  margin-top: 24px;  
  width: auto;                /* kramar innehållet */
  max-width: 100%;       /* överstyr default 24px */
}

/* (valfritt) lite tightare paddning i korten */
.schakt-grid .checklist-card {
  padding: 20px;
}

@media (max-width: 1100px) {
  .schakt-grid { grid-template-columns: 1fr; }
}

/* === Project Modal Layout === */
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 320px; /* vänster flexibel, höger fast bredd */
  gap: 1rem;
}

.modal-content-project {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  max-width: 1200px;   /* 👈 bestäm maxbredd */
  width: 90%;          /* responsiv */
  margin: auto;        /* centrera horisontellt */
}

.modal__backdrop {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem; /* lite spacing runt om */
}

.modal-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 70vh;     /* scrolla kommentarer separat */
  overflow-y: auto;
  border-left: 1px solid #eee;
  padding-left: 1rem;
}

  .grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr; /* två lika breda kolumner */
    gap: 1rem;
  }

@media (max-width: 900px) {
  .modal-grid {
    grid-template-columns: 1fr; /* lägg i en kolumn på små skärmar */
  }

  .modal-right {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #eee;
    padding-top: 1rem;
    max-height: none;
  }
}

.ue-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

.legend-color {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border-radius: 3px;
}

.fc-event-custom {
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 2px 4px;
  border-radius: 4px;
  color: #fff; /* vit text på färgad bakgrund */
}

.fc-event-title {
  font-weight: bold;
}

.fc-event-subtitle {
  font-size: 0.7rem;
  opacity: 0.9;
}

.fc-daygrid-day-number {
  font-size: 1rem;   /* lite större text */
  font-weight: 600;    /* halvfet */
}

/* Markera dagens datum */
.fc-day-today {
  background-color: #d1fae5 !important; /* ljusgrön (Tailwind green-100) */
}

.fc-day-today .fc-daygrid-day-number {
  font-weight: 700;   /* extra fet siffra för idag */
  color: #065f46;     /* mörkgrön text */
}

.sticky-scroll {
  overflow-x: auto;
  position: sticky;
  bottom: 0;
  background: white;  /* så att scrollbaren inte hamnar över annat */
  z-index: 10;        /* så den syns över innehåll */
}

/* --- Nyheter: kompakt/expanderad utan att bryta layout --- */
.news-card {
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
  overflow: hidden;
  margin-bottom: 16px;
}

.news-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.news-card .news-card-header {
  font-weight: 600;
  margin-bottom: 6px;
}

/* Kompakt vy (klämt) */
.news-content {
  overflow: hidden;
  transition: height 0.4s ease;
  height: auto; /* kommer styras av JS */
}

.news-card.expanded .news-content {
  height: auto; /* när expanderad vill vi att den ska följa innehållets höjd */
}

.news-expand-btn {
  margin-top: 8px;
  background: none;
  border: none;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  color: #0055cc;
  padding: 0;
}

/* Layout */
.dashboard-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.password-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.password-field input {
  flex: 1;
}

.toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
}