/* General App Styles */
.app-content-placeholder {
    padding: 20px;
    text-align: center;
    color: #555;
}

/* Button Styles */
button,
.button {
    background-color: var(--ui-controls-background-color, #f0f0f0);
    color: var(--ui-controls-text-color, #333);
    border: 1px solid var(--ui-controls-border-color, #ccc);
    padding: 8px 15px;
    border-radius: var(--ui-elements-border-radius, 4px);
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

button:hover,
.button:hover {
    background-color: var(--ui-controls-hover-background-color, #e0e0e0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button:active,
.button:active {
    background-color: var(--ui-controls-active-background-color, #d0d0d0);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

button.primary,
.button.primary {
    background-color: var(--ui-accent-color, #007bff);
    color: var(--ui-accent-text-color, #fff);
    border-color: var(--ui-accent-color, #007bff);
}

button.primary:hover,
.button.primary:hover {
    background-color: var(--ui-accent-hover-color, #0056b3);
}

button.primary:active,
.button.primary:active {
    background-color: var(--ui-accent-active-color, #004085);
}

button[disabled],
.button[disabled] {
    background-color: var(--ui-controls-disabled-background-color, #e9ecef); /* Lighter, more muted */
    color: var(--ui-controls-disabled-text-color, #adb5bd); /* Greyed out text */
    border-color: var(--ui-controls-disabled-border-color, #ced4da);
    cursor: not-allowed;
    opacity: 0.65; /* Standard practice for disabled elements */
    box-shadow: none; /* Remove hover/active shadows */
}

/* Specifically for primary disabled buttons, if they need to look different from standard disabled buttons */
button.primary[disabled],
.button.primary[disabled] {
    background-color: var(--ui-accent-disabled-background-color, #a0c7e4); /* Muted version of primary */
    color: var(--ui-accent-disabled-text-color, #e0e0e0);
    border-color: var(--ui-accent-disabled-border-color, #a0c7e4);
    opacity: 0.6; /* Slightly different opacity if needed, or keep same as general disabled */
}


/* Input and Textarea Styles */
input[type="text"],
input[type="password"],
input[type="number"],
textarea {
    padding: 8px;
    border: 1px solid var(--ui-controls-border-color, #ccc);
    border-radius: var(--ui-elements-border-radius, 4px);
    font-size: 1rem;
    background-color: var(--ui-input-background-color, #fff);
    color: var(--ui-input-text-color, #333);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--ui-accent-color, #007bff);
    box-shadow: 0 0 0 2px var(--ui-accent-focus-shadow-color, rgba(0,123,255,.25));
}

/* Scrollbar styling (Webkit browsers) */
::-webkit-scrollbar {
    width: 8px; 
    height: 8px; 
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color, rgba(0,0,0,0.1)); /* Reverted to variable */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color, #888); /* Reverted to variable */
    border-radius: 4px;
    border: 1px solid var(--scrollbar-track-color, rgba(0,0,0,0.1)); /* Reinstate border with variable */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-color, #555); /* Reverted to variable */
}

/* For Firefox */
* {
  scrollbar-width: thin; 
  scrollbar-color: var(--scrollbar-thumb-color, #888) var(--scrollbar-track-color, rgba(0,0,0,0.1)); /* Reverted to variables */
}