/* ================================================================================================= */
/*   HABUS – CSS
/* ================================================================================================= */

/* --------------------------------------------------------------------------------------------------*/
/* 1) Text Alignment Helper */
/* --------------------------------------------------------------------------------------------------*/

	.habus-text-left   { text-align: left !important; }
	.habus-text-center { text-align: center !important; }
	.habus-text-right  { text-align: right !important; }

/* --------------------------------------------------------------------------------------------------*/
/* 2) Form Row Alignment Helper */
/* --------------------------------------------------------------------------------------------------*/

	.habus-form-row {
	  display: flex;
	  flex-direction: row;
	  gap: 12px;
	  align-items: center;
	  flex-wrap: nowrap;
	}
	
	/* Standard: Inputs teilen sich den Platz */
	.habus-form-row > * {
	  flex: 1;
	  min-width: 0;
	}

   /* Column: Elemente untereinander */
	.habus-form-col {
	  display: flex;
	  flex-direction: column;
	  gap: 10px;
	}

	/* Mobile Verhalten: Rows werden automatisch Columns */
	@media (max-width: 768px) {
	
	  /* Row bricht auf Mobile standardmäßig um */
	  .habus-form-row {
	    flex-direction: column;
	    align-items: stretch;
	    gap: 10px;
	  }
	
	  /* Ausnahme: Datum-Row soll nebeneinander bleiben */
	  .habus-form-row.habus-date-row {
	    flex-direction: row !important;
	    gap: 8px;
	  }
	
	  .habus-form-row.habus-date-row > input[type="date"],
	  .habus-form-row.habus-date-row > input[type="time"],
	  .habus-form-row.habus-date-row > input[type="datetime-local"] {
	    flex: 1;
	    font-size: 16px !important;
	    padding: 8px !important;
	  }
	}

/* --------------------------------------------------------------------------------------------------*/
/* 3) Formulare, Buttons & Utility */
/* --------------------------------------------------------------------------------------------------*/

	/* Standard Button */
	button {
	    padding: 6px 12px;
	    font-size: var(--habus-font-size-base);
	    border: none;
	    border-radius: var(--habus-button-radius);
	    color: black;
	    cursor: pointer;
	}
	
	/* SVG Buttons / Icons */
	.habus-action { text-align: center; }
	
	.habus-btn {
	    border: 0;
	    background: var(--habus-color-btn);
	    cursor: pointer;
	    padding: 6px 8px;
	    border-radius: var(--habus-button-radius);
	    line-height: 1;
	    color: black;
	    transition: .15s;
	}
	.habus-btn:hover { background: rgba(91,121,64,.15); }
	
	.habus-icon {
	    display: block;
	    width: 18px;
	    height: 18px;
	}
	
	.habus-color-btn-loeschen   { background: var(--habus-color-btn-loeschen); }
	.habus-color-btn-aendern    { background: var(--habus-color-btn-aendern); }
	.habus-color-btn-bestaetigen{ background: var(--habus-color-btn-bestaetigen); }
	.habus-color-btn-krank      { background: var(--habus-color-btn-krank); }
	.habus-color-btn-urlaub     { background: var(--habus-color-btn-urlaub); }
	
	/* Optional: farbige Akzente */
	.habus-btn.is-ok     { color: #2F8F3A; }
	.habus-btn.is-danger { color: #D64545; }
	.habus-btn.is-accent {
	    --habus-accent:  #FFD24D;
	    --habus-accent2: #3A8DFF;
	}
	
	/* Spezielle Buttonarten (Komma-Selektoren korrekt zusammengefasst) */
	.habus-update-btn,
	.update-btn { background: var(--habus-color-btn-update); }
	
	.habus-delete-btn,
	.delete-btn { background: var(--habus-color-btn-delete); }
	
	.habus-create-btn,
	.create-btn { background: var(--habus-color-btn-create); }
	
	.symbol-btn { background: var(--habus-color-btn-neutral); }
	.text-btn   { background: var(--habus-color-btn-neutral); }
	
	.disabled { opacity: 0.1; cursor: not-allowed; }
	.success  { color: green; }
	
	input[type=text],
	input[type=password],
	select {
	    width: 100%;
	    border: none;
	    background: transparent;
	    text-align: center;
	    font-size: var(--habus-font-size-base);
	}
	
	.filter-input {
	    margin: 10px 0;
	    padding: 6px;
	    width: 300px;
	    font-size: var(--habus-font-size-base);
	}
	
	/* Selects – inkl. Anwesenheitsfilter */
	select,
	#userSelect,
	#monatSelect {
	    padding: 8px 12px;
	    font-size: var(--habus-font-size-base);
	    font-weight: bold;
	}
	
	#userSelect { min-width: 150px; }
	
	.habus-selectionfilter {
	    display: flex;
	    align-items: center;
	    gap: 15px;
	    width: 100%;
	}
	
	.habus-selectionfilter_rightgroup {
	    margin-left: auto;
	    display: flex;
	    align-items: center;
	    gap: 15px;
	}

/* Popup – zentriert und verschiebbar via JS */
/* Layout-Helfer */
.date-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.date-row > div {
    display: flex;
    flex-direction: column;
}

#statusMessage {
    margin-top: 1rem;
    color: #333;
    font-size: var(--habus-font-size-base);
}

/* Mobile */
@media screen and (max-width: 480px) {
    #statusMessage { font-size: var(--habus-font-size-base); }
}

/* ================================================================================================= */