/* Red: rgb(230,60,60) */
/* Blue: rgb(0,150,255) */


/* ✅ GLOBAL TEXT COLORS */
body {
    color: rgb(75,75,75);
	background:rgb(255,255,255); 
}
.secondary-text,
.settings-row label,
.backup-size {
    color: rgb(125,125,125);
}
.settings-small-input {
    width: 100px;
    flex: 0 0 100px !important;
    max-width: 100px !important;
}
/* ✅ GLOBAL BORDERS */
hr,
.settings-section,
.backup-item {
    border-color: rgba(0,0,0,0.08);
}
/* ✅ LIGHT SURFACES */
.settings-container,
.note-info-container,
.help-container,
.note-lock-container,
.user-confirmation-container {
    background: rgb(245,245,245);
}
/* ✅ BUTTON BASE */
button {
    transition: background 0.2s, color 0.2s, border 0.2s;
}
/* ✅ PRIMARY HOVER COLOR */
:root {
    --primary-blue: rgb(0,150,255);
}
.settings-wrapper .apply-button:hover,
.backup-item:hover {
    background: rgba(0,150,255,0.08);
}
button, input {
    transition: all 0.2s ease;
}
input::placeholder {
    color: rgb(150,150,150);
}
.settings-row input,
.settings-input-field,
input[type="text"],
input[type="password"],
input[type="number"] {
    background: rgb(255,255,255);
    border: 1px solid rgba(0,0,0,0.15);
}
input::placeholder {
	color:rgb(125,125,125);
}
a {
	color:rgb(0,150,255);
}

.spoiler {
	color:rgb(75,75,75);
	background:rgb(75,75,75);
}
.spoiler:before {
	color:rgb(245,245,245);
}

.column {
	color:rgb(75,75,75);
}
.sidebar-wrapper {
	background:rgb(235,235,235);
}
.notes-wrapper {
	background:rgb(240,240,240);
	box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}
.editor-wrapper {
	background:rgb(235,235,235);
	box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}

#desktop .sidebar-icon-wrapper:hover svg, .sidebar-icon-wrapper.active svg {
	fill:rgb(0,150,255);
}
.sidebar-icon-wrapper svg {
	fill:rgb(75,75,75);
}

#desktop .note-wrapper:hover {
	background:rgb(250,250,250);
}
.note-container {
	border-bottom:1px solid rgb(200,200,200);
}
.note-date-wrapper {
	color:rgb(125,125,125);
}
.note-status-wrapper .locked-icon {
	fill:rgba(230,60,60,0);
}
.note-status-wrapper .unlocked-icon {
	fill:rgb(200,200,200);
}
.note-status-wrapper .globe-icon {
	fill:rgba(15,200,0,0);
}
.search-wrapper {
	background:rgb(250,250,250);
	box-shadow:0px 0px 15px rgba(0,0,0,0.2);
}
.search-bar {
	color:rgb(75,75,75);
}

.actions-navbar {
	background:rgb(255,255,255);
	box-shadow:0px 5px 15px rgba(0,0,0,0.1);
}
.action-wrapper {
	background:rgb(240,240,240);
}
#desktop .action-wrapper:hover.action-wrapper svg {
	fill:rgb(0,150,255);
}
.action-wrapper svg {
	fill:rgb(75,75,75);
}

.editor-content {
	color:rgb(75,75,75);
}
.editor-content:empty:before {
	color:rgb(125,125,125);
}
.editor-menu-wrapper {
	background:rgb(250,250,250);
	box-shadow:0px 10px 20px rgba(0,0,0,0.1);
}
.editor-menu-button {
	color:rgb(75,75,75);
}
#desktop .editor-menu-button:hover {
	background:rgb(0,150,255);
	color:rgb(245,245,245);
}
#desktop .editor-menu-button.delete-button:hover {
	background:rgb(230,60,60);
	color:rgb(245,245,245);
}
.editor-submenu-lock-wrapper {
	background:rgb(245,245,245);
	box-shadow:-10px 10px 20px rgba(0,0,0,0.1);
}
.editor-submenu-share-wrapper {
	background:rgb(245,245,245);
	box-shadow:-10px 10px 20px rgba(0,0,0,0.1);
}

.note-title-edit-wrapper {
	background:rgba(0,0,0,0.92);
}
.note-title-edit-container {
	background:rgb(255,255,255);
}
.note-title-edit-text {
	color:rgb(75,75,75);
}
.note-title-edit-input {
	background:rgb(230,230,230);
	color:rgb(75,75,75);
}
.note-title-edit-counter-wrapper {
	background:rgb(230,230,230);
	color:rgb(0,150,255);
}
.note-title-edit-buttons-wrapper svg {
	fill:rgb(75,75,75);
	background:rgb(240,240,240);
}
#desktop .note-title-edit-buttons-wrapper svg:hover {
	fill:rgb(0,150,255);
}

.user-confirmation-wrapper {
	background:rgba(0,0,0,0.92);
}
.user-confirmation-container {
	background:rgb(255,255,255);
}
.user-confirmation-title {
	color:rgb(75,75,75);
}
.user-confirmation-description {
	color:rgb(75,75,75);
}
.user-confirmation-buttons-wrapper svg {
	fill:rgb(75,75,75);
	background:rgb(240,240,240);
}
#desktop .user-confirmation-buttons-wrapper svg:hover {
	fill:rgb(0,150,255);
}

.note-lock-wrapper {
	background:rgba(0,0,0,0.92);
}
.note-lock-container {
	background:rgb(255,255,255);
}
.note-lock-title {
	color:rgb(75,75,75);
}
.note-lock-description {
	color:rgb(75,75,75);
}
.note-lock-input {
	background:rgb(230,230,230);
	color:rgb(75,75,75);
}
.note-lock-buttons-wrapper svg {
	fill:rgb(75,75,75);
	background:rgb(240,240,240);
}
#desktop .note-lock-buttons-wrapper svg:hover {
	fill:rgb(0,150,255);
}

.note-info-wrapper {
	background:rgba(0,0,0,0.92);
}
.note-info-container {
	background:rgb(255,255,255);
}
.note-info-title {
	color:rgb(75,75,75);
}
.note-info-content-wrapper {
	background:rgb(230,230,230);
	box-shadow:-2.5px 5px 15px rgba(0,0,0,0.2);
}
.note-info-content {
	color:rgb(75,75,75);
}
.note-info-buttons-wrapper svg {
	fill:rgb(75,75,75);
	background:rgb(240,240,240);
}
#desktop .note-info-buttons-wrapper svg:hover {
	fill:rgb(0,150,255);
}

.help-wrapper {
	background:rgba(0,0,0,0.92);
}
.help-container {
	background:rgb(255,255,255);
}
.help-title {
	color:rgb(75,75,75);
}
.help-content-wrapper {
	background:rgb(230,230,230);
	box-shadow:-2.5px 5px 15px rgba(0,0,0,0.2);
}
.help-content-title {
	border:2px solid rgb(0,150,255);
	color:rgb(0,150,255);
}
#desktop .help-content-title:hover, .help-content-title.active {
	color:rgb(245,245,245);
	border:2px solid rgba(0,150,255,0);
	background:rgb(0,150,255);
}
.help-content-text {
	color:rgb(75,75,75);
}
.help-buttons-wrapper svg {
	fill:rgb(75,75,75);
	background:rgb(240,240,240);
}
#desktop .help-buttons-wrapper svg:hover {
	fill:rgb(0,150,255);
}

.settings-wrapper {
	background: rgba(0,0,0,0.6);
}
.settings-container {
	background: rgb(245,245,245);
}
.settings-title {
	color:rgb(75,75,75);
	background:rgb(255,255,255);
	border-bottom: 1px solid rgba(0,0,0,0.08);
	box-shadow:0px 5px 15px rgba(0,0,0,0.1);
}
.settings-wrapper .apply-button {
    border: 2px solid rgb(0,150,255);
    color: rgb(0,150,255);
    background: transparent;
}
.settings-wrapper .apply-button:hover {
    background: rgb(0,150,255);
    color: rgb(245,245,245);
}
/* ✅ SETTINGS INPUTS (Fix for new system fields) */
.settings-row input {
    background: rgb(255,255,255);
    color: rgb(75,75,75);
    border: 1px solid rgba(0,0,0,0.15);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.settings-row input:focus {
    border-color: rgb(0,150,255);
    background: rgb(255,255,255);
    box-shadow: 0 0 0 2px rgba(0,150,255,0.15);
}
#desktop .settings-wrapper .apply-button:hover {
	background:rgb(0,150,255);
	color:rgb(245,245,245);
}
.settings-wrapper .close-button {
	border:2px solid rgb(0,150,255);
	color:rgb(0,150,255);
}
#desktop .settings-wrapper .close-button:hover {
	background:rgb(0,150,255);
	color:rgb(245,245,245);
}
.settings-sidebar-wrapper {
	background:rgb(245,245,245);
	border-right: 1px solid rgba(0,0,0,0.08);
	box-shadow:0px 10px 15px rgba(0,0,0,0.1);
}
.settings-sidebar-button {
	color:rgb(75,75,75);
	border-right:2px solid rgba(245,245,245,0);
}
.settings-sidebar-button.active {
    background: rgb(0,150,255);
    color: rgb(245,245,245);
}
#desktop .settings-sidebar-button:hover {
	background:rgb(0,150,255);
	color:rgb(245,245,245);
}
.settings-note-wrapper {
	border-bottom:1px solid rgb(200,200,200);
	color:rgb(75,75,75);
}
.settings-note-wrapper:last-of-type {
	border-bottom:1px solid rgba(125,125,125,0);
}
.settings-note-delete-button {
	color:rgb(230,60,60);
	border:2px solid rgb(230,60,60);
}
#desktop .settings-note-delete-button:hover {
	background:rgb(230,60,60);
	color:rgb(245,245,245);
	border:2px solid rgba(230,60,60,0);
}
.settings-section {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.settings-heading-text {
	color:rgb(75,75,75);
}
.settings-row label {
    color: rgb(100,100,100);
}
.settings-row input::placeholder {
    color: rgb(150,150,150);
}
.settings-action-button.blue {
	color:rgb(0,150,255);
	border:2px solid rgb(0,150,255);
}
#desktop .settings-action-button.blue:hover {
	background:rgb(0,150,255);
	color:rgb(245,245,245);
	border:2px solid rgba(0,150,255,0);
}
.settings-action-button.red {
	color:rgb(230,60,60);
	border:2px solid rgb(230,60,60);
}
#desktop .settings-action-button.red:hover {
	background:rgb(230,60,60);
	color:rgb(245,245,245);
	border:2px solid rgba(230,60,60,0);
}
.settings-action-button.active {
	background:rgb(0,150,255);
	color:rgb(245,245,245);
	border:2px solid rgba(0,150,255,0);
}
.settings-input-field {
	background:rgb(250,250,250);
	color:rgb(100,100,100);
}

.notification-wrapper {
	background:rgb(0,150,255);
	box-shadow:0px 10px 20px rgba(0,0,0,0.1);
	color:rgb(245,245,245);
}

.login-page-overlay {
	background:rgba(0,0,0,0.7);
}

.login-container {
	background:rgb(235,235,235);
	color:rgb(75,75,75);
	box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}
.login-input-field {
	background:rgb(250,250,250);
	color:rgb(75,75,75);
}
.login-button {
	background:rgb(0,150,255);
	color:rgb(245,245,245);
}
#desktop .login-button:hover {
	background:rgb(0,130,255);
	color:rgb(245,245,245);
}
.login-remember-active {
	color:rgb(233,233,233) !important;
	background:rgb(0,150,255) !important;
}
.login-remember-wrapper {
	box-shadow:0px 5px 15px rgba(0,0,0,0.15);
	background:rgb(230,230,230);
	color:rgb(150,150,150);
}
#desktop .login-remember-wrapper:hover {
	color:rgb(233,233,233);
	background:rgb(0,150,255);
}

.note-container-placeholder {
	border-bottom:1px solid rgb(200,200,200);
}
.note-title-placeholder {
	background:rgb(75,75,75);
}
.note-date-placeholder {
	background:rgb(125,125,125);
}
.note-icon-placeholder-right {
	background:rgb(200,200,200);
}
.note-icon-placeholder-left {
	background:rgb(200,200,200);
}
/* ✅ Light Theme */

body#desktop .log-entry,
body#mobile .log-entry {
    border: 1px solid rgba(0, 0, 0, 0.05);
}
/* ✅ BACKUP ROW BASE (LIGHT MODE) */
.backup-item {
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.08);
}
/* ✅ BACKUP HOVER */
.backup-item:hover {
    background: rgba(0,150,255,0.08);
    border-color: rgb(0,150,255);
}
.backup-name {
    color: rgb(75,75,75);
}
.backup-size {
    color: rgb(125,125,125);
}
.backup-download-button {
    background: transparent;
}
.backup-delete-button {
    background: transparent;
}
.backup-item:first-child {
    border-color: rgb(0,150,255);
    background: rgba(0,150,255,0.08);
}