/*
 * Dark Theme Stylesheet - Soft / Medium Contrast
 */

html.dark {
  --bg-app: #1b2333;
  --bg-surface: #242f45;
  --bg-surface-hover: #2c3852;
  --bg-input: #1c2536;
  --border-color: #2f3d57;
  --border-color-dark: #3b4c6c;
  --text-primary: #d8e0ec;
  --text-heading: #edf2f7;
  --text-secondary: #94a3b8;
  --text-muted: #7888a3;
  --color-primary: #818cf8;
  --color-primary-hover: #a5b4fc;
  --color-primary-light: #2c3756;
  color-scheme: dark;
}

/* Base Body & Layout */
html.dark,
html.dark body {
  background-color: var(--bg-app);
  color: var(--text-primary);
}

html.dark main {
  background-color: var(--bg-app);
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: var(--text-heading);
}

html.dark p {
  color: var(--text-secondary);
}

html.dark hr {
  border-top-color: var(--border-color);
}

/* Base Buttons */
html.dark button:not(.btn-primary):not(.btn-icon):not(.signout-link),
html.dark input[type=submit]:not(.btn-primary):not(#toolbar-submit-button) {
  background-color: #28354c;
  border-color: #3b4c6c;
  color: #e2e8f0;
}

html.dark button:not(.btn-primary):not(.btn-icon):not(.signout-link):hover,
html.dark input[type=submit]:not(.btn-primary):not(#toolbar-submit-button):hover {
  background-color: #32425e;
  border-color: #4a5e84;
  color: #ffffff;
}

/* Sidebar */
html.dark nav.sidebar,
html.dark .sidebar {
  background-color: #182030;
  border-right-color: #29364e;
}

html.dark .sidebar-brand {
  border-bottom-color: #29364e;
}

html.dark .brand-title {
  color: var(--text-heading);
}

html.dark .sidebar-user {
  background-color: #212c3f;
  border-color: #2f3d57;
}

html.dark .sidebar-user .user-name {
  color: var(--text-heading);
}

html.dark .sidebar-menu .menu-section-title {
  color: #7888a3;
}

html.dark .sidebar-menu .menu-item {
  color: #94a3b8;
}

html.dark .sidebar-menu .menu-item:hover {
  background-color: #232e42;
  color: #edf2f7;
}

html.dark .sidebar-menu .menu-item.selected {
  background-color: #2b3654;
  color: #c7d2fe;
}

html.dark .sidebar-menu .menu-item.selected .menu-icon {
  color: #a5b4fc;
}

html.dark .sidebar-footer {
  border-top-color: #29364e;
}

html.dark .signout-link,
html.dark .theme-toggle-link {
  color: #94a3b8;
}

html.dark .signout-link:hover,
html.dark .theme-toggle-link:hover {
  background-color: #232e42;
  color: #edf2f7;
}

/* Toolbar */
html.dark .toolbar,
html.dark div.toolbar {
  background-color: rgba(24, 32, 48, 0.92);
  border-bottom-color: #29364e;
  backdrop-filter: blur(8px);
}

html.dark .toolbar > span,
html.dark div.toolbar > span {
  color: var(--text-heading);
}

html.dark .toolbar span a:not(.navbutton),
html.dark div.toolbar span a:not(.navbutton),
html.dark .navbutton,
html.dark .toolbar span .navbutton,
html.dark div.toolbar span .navbutton,
html.dark .toolbar div a,
html.dark .toolbar div button,
html.dark .toolbar div input[type="submit"] {
  background-color: #253147;
  border-color: #384966;
  color: #cbd5e1;
}

html.dark .toolbar span a:not(.navbutton):hover,
html.dark div.toolbar span a:not(.navbutton):hover,
html.dark .navbutton:hover,
html.dark .toolbar div a:hover,
html.dark .toolbar div button:hover {
  background-color: #2e3d57;
  color: #ffffff;
  border-color: #485d82;
}

/* Cards and Surfaces */
html.dark .card,
html.dark .form-card,
html.dark .login-card,
html.dark .login-box,
html.dark .notes-sidebar,
html.dark .note-item,
html.dark .document-item,
html.dark .documents-sidebar,
html.dark .movements-total,
html.dark .movement-section,
html.dark .settings-sidebar,
html.dark .settings-main,
html.dark .table-note-content,
html.dark .bg-white {
  background-color: var(--bg-surface) !important;
}

html.dark .card,
html.dark .login-card,
html.dark .login-box,
html.dark .document-item,
html.dark .note-item,
html.dark .notes-sidebar,
html.dark .documents-sidebar,
html.dark .table-note-content {
  border-color: var(--border-color) !important;
}

html.dark .card:hover,
html.dark .note-item:hover,
html.dark .document-item:hover,
html.dark .table-note-content:hover {
  border-color: #3e4f6d !important;
}

html.dark .card .card-title,
html.dark .card-title {
  color: #94a3b8;
}

html.dark .card .card-content,
html.dark .card-content {
  color: var(--text-heading);
}

/* Document & Note Specific Elements */
html.dark .document-title,
html.dark .note-title {
  color: var(--text-heading) !important;
}

html.dark .document-title:hover,
html.dark .note-title:hover {
  color: var(--color-primary-hover) !important;
}

html.dark .document-meta,
html.dark .note-meta {
  color: var(--text-secondary) !important;
}

html.dark .document-icon {
  background-color: rgba(239, 68, 68, 0.16) !important;
  color: #f87171 !important;
}

html.dark .note-icon {
  background-color: rgba(99, 102, 241, 0.16) !important;
  color: #a5b4fc !important;
}

html.dark .document-category-tag {
  background-color: #1e273a !important;
  color: #d8e0ec !important;
}

html.dark .note-badge-encrypted {
  background-color: rgba(16, 185, 129, 0.16) !important;
  color: #6ee7b7 !important;
}

html.dark .pdf-preview-container {
  background-color: #1e273a !important;
  border-color: var(--border-color) !important;
}

html.dark .category-sub-tree {
  border-left-color: var(--border-color) !important;
}

html.dark .category-nav-item .badge {
  background-color: #263248 !important;
  color: var(--text-secondary) !important;
}

html.dark .category-nav-item.active .badge {
  background-color: #3b4870 !important;
  color: #c7d2fe !important;
}

/* Background Grays & Slates */
html.dark .bg-slate-50,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/70,
html.dark .bg-slate-50\/80,
html.dark .bg-slate-50\/90 {
  background-color: #1e273a !important;
}

html.dark .bg-slate-100 {
  background-color: #263248 !important;
}

html.dark .bg-slate-200 {
  background-color: #2f3d57 !important;
}

/* Soft Accent / Badge Backgrounds */
html.dark .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.16) !important;
  color: #a5b4fc !important;
}

html.dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.16) !important;
  color: #6ee7b7 !important;
}

html.dark .bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.16) !important;
  color: #fcd34d !important;
}

html.dark .bg-purple-50 {
  background-color: rgba(168, 85, 247, 0.16) !important;
  color: #d8b4fe !important;
}

html.dark .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.16) !important;
  color: #fca5a5 !important;
}

html.dark .text-indigo-600,
html.dark .text-indigo-700 {
  color: #a5b4fc !important;
}

html.dark .text-emerald-600,
html.dark .text-emerald-700 {
  color: #6ee7b7 !important;
}

html.dark .text-amber-600,
html.dark .text-amber-700 {
  color: #fcd34d !important;
}

html.dark .text-purple-600,
html.dark .text-purple-700 {
  color: #d8b4fe !important;
}

html.dark .text-red-600,
html.dark .text-red-700 {
  color: #fca5a5 !important;
}

html.dark .border-indigo-100,
html.dark .border-indigo-200,
html.dark .border-indigo-200\/60,
html.dark .border-indigo-200\/80 {
  border-color: rgba(99, 102, 241, 0.3) !important;
}

html.dark .border-red-200 {
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Borders */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/60,
html.dark .border-slate-200\/70,
html.dark .border-slate-200\/80,
html.dark .border-slate-200\/90 {
  border-color: var(--border-color) !important;
}

html.dark .border-slate-300 {
  border-color: var(--border-color-dark) !important;
}

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-color) !important;
}

/* Typography Overrides */
html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: var(--text-heading) !important;
}

html.dark .text-slate-700 {
  color: #d8e0ec !important;
}

html.dark .text-slate-600 {
  color: #cbd5e1 !important;
}

html.dark .text-slate-500 {
  color: #94a3b8 !important;
}

html.dark .text-slate-400 {
  color: #7888a3 !important;
}

/* Gray Utilities Overrides */
html.dark .text-gray-900,
html.dark .text-gray-800 {
  color: var(--text-heading) !important;
}

html.dark .text-gray-700 {
  color: #d8e0ec !important;
}

html.dark .text-gray-600 {
  color: #cbd5e1 !important;
}

html.dark .text-gray-500 {
  color: #94a3b8 !important;
}

html.dark .text-gray-400 {
  color: #7888a3 !important;
}

html.dark .bg-gray-100 {
  background-color: #263248 !important;
}

html.dark .border-gray-200 {
  border-color: var(--border-color) !important;
}

html.dark .border-gray-300 {
  border-color: var(--border-color-dark) !important;
}

html.dark .hover\:bg-gray-100:hover {
  background-color: #2c3852 !important;
}

/* Forms & Inputs */
html.dark .form-control,
html.dark input[type=text].form-control,
html.dark input[type=password].form-control,
html.dark input[type=date].form-control,
html.dark input[type=month].form-control,
html.dark input[type=email].form-control,
html.dark input[type=number].form-control,
html.dark textarea.form-control,
html.dark select.form-control,
html.dark select,
html.dark input[type=text],
html.dark input[type=password],
html.dark input[type=date],
html.dark input[type=email] {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: #384966 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #6b7c99 !important;
}

html.dark .form-control:focus,
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

html.dark label {
  color: #cbd5e1 !important;
}

html.dark .form-label {
  background-color: transparent !important;
  color: #7888a3 !important;
}

html.dark .form-fix-label {
  background-color: var(--bg-surface) !important;
  color: #94a3b8 !important;
  border-radius: 4px;
}

html.dark .form-control:focus + .form-label,
html.dark .form-control:not(:placeholder-shown) + .form-label,
html.dark input.form-control:focus + .form-label,
html.dark input.form-control:not(:placeholder-shown) + .form-label,
html.dark input[type=text].form-control:focus + .form-label,
html.dark input[type=text].form-control:not(:placeholder-shown) + .form-label,
html.dark input[type=password].form-control:focus + .form-label,
html.dark input[type=password].form-control:not(:placeholder-shown) + .form-label,
html.dark input[type=email].form-control:focus + .form-label,
html.dark input[type=email].form-control:not(:placeholder-shown) + .form-label,
html.dark input[type=number].form-control:focus + .form-label,
html.dark input[type=number].form-control:not(:placeholder-shown) + .form-label,
html.dark input[type=date].form-control:focus + .form-label,
html.dark input[type=date].form-control:not(:placeholder-shown) + .form-label,
html.dark input[type=month].form-control:focus + .form-label,
html.dark input[type=month].form-control:not(:placeholder-shown) + .form-label,
html.dark input:-webkit-autofill + .form-label,
html.dark textarea.form-control:focus + .form-label,
html.dark textarea.form-control:not(:placeholder-shown) + .form-label {
  background-color: var(--bg-surface) !important;
  color: #a5b4fc !important;
  border-radius: 4px;
}

html.dark .form-control:not(:focus):not(:placeholder-shown) + .form-label,
html.dark input.form-control:not(:focus):not(:placeholder-shown) + .form-label,
html.dark input[type=text].form-control:not(:focus):not(:placeholder-shown) + .form-label,
html.dark input[type=password].form-control:not(:focus):not(:placeholder-shown) + .form-label,
html.dark input[type=email].form-control:not(:focus):not(:placeholder-shown) + .form-label,
html.dark input[type=number].form-control:not(:focus):not(:placeholder-shown) + .form-label,
html.dark textarea.form-control:not(:focus):not(:placeholder-shown) + .form-label {
  background-color: var(--bg-surface) !important;
  color: #cbd5e1 !important;
}

html.dark .file-upload-box {
  background-color: #1e273a !important;
  border-color: var(--border-color-dark) !important;
}

html.dark .file-upload-box:hover {
  background-color: #242f45 !important;
  border-color: #818cf8 !important;
}

/* WebKit Autofill in Dark Mode */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #1c2536 inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Search Boxes (Tasks, Notes, Documents) */
html.dark .search-box {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

html.dark .search-box:focus-within {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

html.dark .search-box input[type="text"],
html.dark .search-box input {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-heading) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

html.dark .search-box input[type="text"]:focus,
html.dark .search-box input:focus {
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

html.dark .search-box input::placeholder {
  color: #7888a3 !important;
}

html.dark .search-box button {
  background-color: transparent !important;
  border: none !important;
  color: #7888a3 !important;
}

html.dark .search-box button:hover {
  background-color: #2c3852 !important;
  color: #edf2f7 !important;
}

html.dark .search-box svg {
  color: #7888a3 !important;
}

/* Icon Buttons */
html.dark .btn-icon,
html.dark button.btn-icon,
html.dark a.btn-icon {
  background-color: #242f45;
  border-color: #384966;
  color: #cbd5e1;
}

html.dark .btn-icon:hover,
html.dark button.btn-icon:hover,
html.dark a.btn-icon:hover {
  background-color: #2c3852;
  border-color: #485d82;
  color: #ffffff;
}

html.dark .btn-icon-danger {
  color: #f87171;
  border-color: #7f1d1d;
  background-color: rgba(127, 29, 29, 0.25);
}

html.dark .btn-icon-danger:hover {
  background-color: rgba(220, 38, 38, 0.35);
  color: #fca5a5;
  border-color: #ef4444;
}

/* Hovers */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-50\/60:hover,
html.dark .hover\:bg-slate-50\/50:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-200:hover {
  background-color: #2c3852 !important;
}

html.dark .category-nav-item:hover {
  background-color: #263248;
  color: #edf2f7;
}

html.dark .category-nav-item.active {
  background-color: #2b3654;
  color: #c7d2fe;
}

/* Tables */
html.dark table thead tr {
  background-color: #1e273a !important;
}

html.dark table tbody tr:hover {
  background-color: #263248 !important;
}

html.dark table tfoot tr {
  background-color: #1e273a !important;
  border-top-color: var(--border-color) !important;
}

/* Trix & ActionText */
html.dark trix-toolbar {
  background-color: #212c3f;
  border-color: #34425d;
}

html.dark trix-toolbar .trix-button {
  background-color: #212c3f;
  border-color: #34425d;
  color: #cbd5e1;
}

html.dark trix-toolbar .trix-button:hover {
  background-color: #2c3852;
}

html.dark trix-toolbar .trix-button.trix-active {
  background-color: #4f46e5;
  color: #ffffff;
}

html.dark trix-editor {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border-color: #34425d;
}

/* Global Flash Toasts */
html.dark .flash-notice {
  background-color: rgba(20, 83, 45, 0.35);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.35);
}

html.dark .flash-alert {
  background-color: rgba(146, 64, 14, 0.35);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
}

/* Tooltips */
html.dark span.tooltip {
  background-color: #212c3f;
  border-color: #34425d;
  color: #cbd5e1;
}

/* Logo Switching for Light / Dark mode */
.logo-dark {
  display: none !important;
}

html.dark .logo-light {
  display: none !important;
}

html.dark .logo-dark {
  display: block !important;
}

/* Signin / Anonymous layout transparency */
html.dark .login-main,
html.dark .login-footer {
  background-color: transparent !important;
}