/* Post Fiat Dark Theme for CryptPad
 * Monochromatic dark theme matching Task Node aesthetic
 * Color palette: #0a0a0a to #111 (bg), #1a1a1a (cards), #2a2a2a (borders)
 * Text: #fff (primary), #888 (secondary), #555 (muted)
 * No bright blues or purples - only white/gray accents
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* =============================================
   ROOT VARIABLES & BODY
   ============================================= */

body,
body.cp-app-drive,
body.cp-body-drive,
body.cp-app-pad,
body.cp-body-pad {
    background: #0a0a0a !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* =============================================
   PAD/RICH TEXT EDITOR DARK THEME
   ============================================= */

/* Pad container and iframe wrapper */
body.cp-app-pad,
.cp-app-pad-container,
#cp-app-pad-container,
#cp-app-pad-iframe {
    background: #0a0a0a !important;
}

/* CKEditor container - the rich text editor */
.cke,
.cke_inner,
.cke_contents,
.cke_wysiwyg_frame,
.cke_chrome {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    border: none !important;
}

/* CKEditor toolbar */
.cke_top,
.cke_toolbox,
.cke_toolbar,
.cke_toolgroup {
    background: #111 !important;
    background-color: #111 !important;
    border-color: #2a2a2a !important;
}

/* CKEditor toolbar buttons */
.cke_button,
.cke_combo_button,
a.cke_button,
a.cke_combo_button {
    background: transparent !important;
    border: 1px solid transparent !important;
}

.cke_button:hover,
.cke_combo_button:hover,
a.cke_button:hover,
a.cke_combo_button:hover {
    background: #1a1a1a !important;
    border-color: #333 !important;
}

.cke_button_icon,
.cke_button .cke_icon {
    filter: invert(0.7) !important;
}

.cke_button:hover .cke_button_icon,
.cke_button:hover .cke_icon {
    filter: invert(1) !important;
}

/* CKEditor toolbar text/labels */
.cke_toolgroup span,
.cke_combo_text,
.cke_button__anchor_label,
.cke_combo .cke_combo_text {
    color: #888 !important;
}

/* CKEditor toolbar separator */
.cke_toolbar_separator {
    background: #333 !important;
}

/* CKEditor status bar */
.cke_bottom,
.cke_resizer {
    background: #111 !important;
    border-color: #2a2a2a !important;
}

/* CKEditor path/breadcrumb */
.cke_path,
.cke_path_item {
    color: #666 !important;
}

.cke_path_item:hover {
    color: #fff !important;
    background: #1a1a1a !important;
}

/* CKEditor dropdowns/panels */
.cke_panel,
.cke_panel_block,
.cke_ltr,
.cke_menubutton {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
}

.cke_menubutton:hover,
.cke_menubutton_on {
    background: #252525 !important;
}

.cke_menubutton span,
.cke_menubutton_label {
    color: #888 !important;
}

.cke_menubutton:hover span,
.cke_menubutton:hover .cke_menubutton_label {
    color: #fff !important;
}

/* CKEditor content area - the actual editing area */
.cke_editable,
.cke_wysiwyg_div,
body.cke_editable {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    color: #ddd !important;
}

/* Iframe content styling - important for the actual document */
iframe.cke_wysiwyg_frame {
    background: #0a0a0a !important;
}

/* CKEditor dialog/popups */
.cke_dialog,
.cke_dialog_body {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #fff !important;
}

.cke_dialog_title {
    background: #111 !important;
    color: #fff !important;
    border-color: #2a2a2a !important;
}

.cke_dialog_contents {
    background: #1a1a1a !important;
    color: #ddd !important;
}

.cke_dialog input,
.cke_dialog textarea,
.cke_dialog select {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
}

.cke_dialog_footer {
    background: #111 !important;
    border-color: #2a2a2a !important;
}

/* Pad outer toolbar - CryptPad's toolbar above CKEditor */
body.cp-app-pad .cp-toolbar-container,
body.cp-app-pad #cp-toolbar,
body.cp-app-pad .cp-toolbar {
    background: #0a0a0a !important;
    border-bottom: 1px solid #1a1a1a !important;
}

/* Pad toolbar buttons */
body.cp-app-pad .cp-toolbar button,
body.cp-app-pad .cp-toolbar-rightside button,
body.cp-app-pad .cp-toolbar .cp-dropdown-container button {
    background: transparent !important;
    border: 1px solid #2a2a2a !important;
    color: #888 !important;
}

body.cp-app-pad .cp-toolbar button:hover {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* Pad title */
body.cp-app-pad .cp-toolbar-title,
body.cp-app-pad .cp-toolbar-title-value {
    color: #fff !important;
}

/* Subtle radial glow for depth */
body.cp-app-drive::before,
body.cp-body-drive::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(30, 30, 30, 0.4) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* =============================================
   TOOLBAR (Top Navigation)
   ============================================= */

.cp-toolbar-container,
#cp-toolbar,
.cp-toolbar {
    background: #0a0a0a !important;
    border-bottom: 1px solid #1a1a1a !important;
}

.cp-toolbar-container .cp-toolbar-top,
.cp-toolbar-top {
    background: transparent !important;
}

/* POST FIAT wordmark styling */
.cp-toolbar-title,
.cp-toolbar-title-value,
.cp-toolbar .cp-toolbar-title .cp-toolbar-title-edit,
.cp-toolbar .cp-toolbar-title .cp-toolbar-title-value,
.cp-toolbar-title-hoverable {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
}

/* Toolbar logo/icon - make it white/gray */
.cp-toolbar-title .fa,
.cp-toolbar-title .cptools,
.cp-toolbar-title svg,
.cp-toolbar-title i {
    color: #888 !important;
}

/* Toolbar buttons */
.cp-toolbar button,
.cp-toolbar .cp-toolbar-user .cp-dropdown-container button,
.cp-toolbar .cp-toolbar-right-drawer button,
.cp-toolbar-rightside button {
    background: transparent !important;
    border: 1px solid #2a2a2a !important;
    color: #888 !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
}

.cp-toolbar button:hover,
.cp-toolbar .cp-toolbar-user .cp-dropdown-container button:hover,
.cp-toolbar-rightside button:hover {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #333 !important;
}

/* User menu dropdown */
.cp-dropdown-content {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.cp-dropdown-content a,
.cp-dropdown-content button {
    color: #888 !important;
    background: transparent !important;
    transition: all 0.15s !important;
}

.cp-dropdown-content a:hover,
.cp-dropdown-content button:hover {
    background: #252525 !important;
    color: #fff !important;
}

/* =============================================
   SIDEBAR (Left Tree Navigation)
   AGGRESSIVE OVERRIDES FOR LESS-COMPILED STYLES
   ============================================= */

/* Main tree container */
#cp-app-drive-tree,
.cp-app-drive-tree,
body.cp-app-drive #cp-app-drive-tree,
body.cp-body-drive #cp-app-drive-tree {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    border-right: 1px solid #1a1a1a !important;
}

/* Sidebar search */
.cp-app-drive-tree-search-container,
#cp-app-drive-tree-search {
    background: #111 !important;
    background-color: #111 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    margin: 8px !important;
}

.cp-app-drive-tree-search-container input,
#cp-app-drive-tree-search input {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
}

.cp-app-drive-tree-search-container input::placeholder {
    color: #555 !important;
}

/* Tree categories header text */
.cp-app-drive-tree-category,
.cp-app-drive-tree-categories-container,
body.cp-body-drive .cp-app-drive-tree-category {
    color: #555 !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 12px 12px 6px !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* ==============================================
   SIDEBAR ITEMS - THE KEY FIX FOR WHITE BUTTONS
   Target the exact selectors from drive.less
   ============================================== */

/* Category containers - these have white background by default */
#cp-app-drive-tree .cp-app-drive-tree-docs,
#cp-app-drive-tree .cp-app-drive-tree-category,
body #cp-app-drive-tree .cp-app-drive-tree-docs,
body #cp-app-drive-tree .cp-app-drive-tree-category,
html body #cp-app-drive-tree .cp-app-drive-tree-docs,
html body #cp-app-drive-tree .cp-app-drive-tree-category {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Element rows - the actual items (Search, Recent, Drive, etc) */
#cp-app-drive-tree .cp-app-drive-tree-category li .cp-app-drive-element-row,
#cp-app-drive-tree .cp-app-drive-tree-docs li > span.cp-app-drive-element-row,
body #cp-app-drive-tree .cp-app-drive-tree-category li .cp-app-drive-element-row,
body #cp-app-drive-tree .cp-app-drive-tree-docs li > span.cp-app-drive-element-row,
html body #cp-app-drive-tree .cp-app-drive-tree-category li .cp-app-drive-element-row,
html body #cp-app-drive-tree .cp-app-drive-tree-docs li > span.cp-app-drive-element-row,
.cp-app-drive-element-row {
    background: transparent !important;
    background-color: transparent !important;
    color: #888 !important;
}

/* Hover state for element rows */
#cp-app-drive-tree .cp-app-drive-tree-category li .cp-app-drive-element-row:hover,
#cp-app-drive-tree .cp-app-drive-tree-docs li > span.cp-app-drive-element-row:hover,
body #cp-app-drive-tree .cp-app-drive-element-row:hover,
.cp-app-drive-element-row:hover {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #fff !important;
}

/* The expand/collapse icon background */
#cp-app-drive-tree .cp-app-drive-icon-expcol,
body #cp-app-drive-tree .cp-app-drive-icon-expcol {
    background: transparent !important;
    background-color: transparent !important;
}

/* All tree list items */
#cp-app-drive-tree li,
#cp-app-drive-tree ul li,
body.cp-body-drive #cp-app-drive-tree li,
body.cp-body-drive #cp-app-drive-tree ul li,
.cp-app-drive-tree-category li,
body.cp-body-drive .cp-app-drive-tree-category li {
    color: #888 !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    margin: 2px 6px !important;
    padding: 0 !important;
    border: none !important;
}

#cp-app-drive-tree li:hover,
body.cp-body-drive #cp-app-drive-tree li:hover {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #fff !important;
}

/* Specific named tree items (Search, Recent, Drive, Templates, Trash) */
#cp-app-drive-tree .cp-app-drive-tree-root,
#cp-app-drive-tree .cp-app-drive-tree-owned,
#cp-app-drive-tree .cp-app-drive-tree-trash,
#cp-app-drive-tree .cp-app-drive-tree-template,
#cp-app-drive-tree .cp-app-drive-tree-recent,
#cp-app-drive-tree .cp-app-drive-tree-tags,
#cp-app-drive-tree .cp-app-drive-tree-allfiles,
body.cp-body-drive #cp-app-drive-tree .cp-app-drive-tree-root,
body.cp-body-drive #cp-app-drive-tree .cp-app-drive-tree-recent,
body.cp-body-drive #cp-app-drive-tree .cp-app-drive-tree-owned,
body.cp-body-drive #cp-app-drive-tree .cp-app-drive-tree-trash,
body.cp-body-drive #cp-app-drive-tree .cp-app-drive-tree-template,
.cp-leftside-categories li,
.cp-leftside-categories-content li,
body.cp-body-drive .cp-leftside-categories li {
    color: #888 !important;
    background: transparent !important;
    background-color: transparent !important;
}

#cp-app-drive-tree ul li:hover,
#cp-app-drive-tree .cp-app-drive-tree-root:hover,
#cp-app-drive-tree li:hover,
.cp-leftside-categories li:hover {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* Active/selected tree item - white text with subtle left border, no bright colors */
#cp-app-drive-tree .cp-app-drive-tree-active,
#cp-app-drive-tree .cp-leftside-active,
#cp-app-drive-tree li.cp-app-drive-tree-active,
.cp-leftside-active,
.cp-app-drive-tree-active {
    background: transparent !important;
    color: #fff !important;
    border-left: 2px solid #fff !important;
    padding-left: 10px !important;
}

/* Tree icons - white/light gray, not blue */
#cp-app-drive-tree .fa,
#cp-app-drive-tree .cptools,
#cp-app-drive-tree svg,
#cp-app-drive-tree i,
.cp-app-drive-tree-root .fa,
.cp-app-drive-tree-recent .fa,
.cp-leftside-categories .fa {
    color: #666 !important;
}

#cp-app-drive-tree li:hover .fa,
#cp-app-drive-tree li:hover svg,
#cp-app-drive-tree li:hover i {
    color: #999 !important;
}

/* Splitter/resizer */
.cp-splitter {
    background: #1a1a1a !important;
}

.cp-splitter:hover {
    background: #2a2a2a !important;
}

/* =============================================
   CONTENT AREA (Right Side)
   ============================================= */

#cp-app-drive-content-container {
    background: #0a0a0a !important;
}

#cp-app-drive-content {
    background: transparent !important;
}

/* Content toolbar */
#cp-app-drive-toolbar,
.cp-app-drive-toolbar {
    background: #0a0a0a !important;
    border-bottom: 1px solid #1a1a1a !important;
}

#cp-app-drive-toolbar input,
.cp-app-drive-search input {
    background: #111 !important;
    border: 1px solid #2a2a2a !important;
    color: #fff !important;
    border-radius: 6px !important;
}

#cp-app-drive-toolbar input::placeholder {
    color: #555 !important;
}

#cp-app-drive-toolbar input:focus {
    border-color: #444 !important;
    outline: none !important;
}

/* Toolbar buttons - muted styling */
#cp-app-drive-toolbar button,
.cp-app-drive-toolbar button {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    color: #888 !important;
    border-radius: 6px !important;
}

#cp-app-drive-toolbar button:hover {
    background: #252525 !important;
    color: #fff !important;
}

/* Path/breadcrumb */
.cp-app-drive-path {
    background: transparent !important;
    color: #555 !important;
}

.cp-app-drive-path .cp-app-drive-path-element {
    color: #888 !important;
}

.cp-app-drive-path .cp-app-drive-path-element:hover {
    color: #fff !important;
    background: #1a1a1a !important;
}

/* =============================================
   FILE/FOLDER ICONS (Grid View)
   ============================================= */

#cp-app-drive-content ul li,
.cp-app-drive-element {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    color: #888 !important;
    transition: all 0.2s !important;
}

#cp-app-drive-content ul li:hover,
.cp-app-drive-element:hover {
    background: #222 !important;
    border-color: #333 !important;
    color: #fff !important;
}

/* Selected file/folder - subtle highlight, no bright colors */
#cp-app-drive-content ul li.cp-app-drive-element-selected,
.cp-app-drive-element-selected {
    background: #252525 !important;
    border-color: #444 !important;
    color: #fff !important;
}

/* File/folder name */
.cp-app-drive-element-name {
    color: inherit !important;
    font-size: 13px !important;
}

/* File type icons - white/light gray outlines, not blue */
#cp-app-drive-content .fa,
#cp-app-drive-content svg,
#cp-app-drive-content i,
.cp-app-drive-content-icon,
.cp-app-drive-element .fa,
.cp-app-drive-element svg {
    color: #666 !important;
}

#cp-app-drive-content li:hover .fa,
#cp-app-drive-content li:hover svg,
#cp-app-drive-content li:hover i {
    color: #999 !important;
}

/* =============================================
   NEW BUTTON (+ icon card)
   ============================================= */

.cp-app-drive-new-ghost,
.cp-app-drive-new-folder,
.cp-app-drive-toolbar-new,
.cp-app-drive-element-new {
    background: #1a1a1a !important;
    border: 1px dashed #333 !important;
    color: #666 !important;
    border-radius: 8px !important;
}

.cp-app-drive-new-ghost:hover,
.cp-app-drive-new-folder:hover,
.cp-app-drive-element-new:hover {
    background: #222 !important;
    border-color: #444 !important;
    color: #888 !important;
}

.cp-app-drive-new-ghost .fa,
.cp-app-drive-new-ghost svg,
.cp-app-drive-element-new .fa {
    color: #555 !important;
}

/* =============================================
   LIST VIEW
   ============================================= */

#cp-app-drive-content table {
    background: transparent !important;
}

#cp-app-drive-content table tr {
    background: transparent !important;
    border-bottom: 1px solid #1a1a1a !important;
}

#cp-app-drive-content table tr:hover {
    background: #1a1a1a !important;
}

#cp-app-drive-content table th {
    background: #111 !important;
    color: #555 !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #2a2a2a !important;
}

#cp-app-drive-content table td {
    color: #888 !important;
    border: none !important;
}

/* =============================================
   INFO BANNER (reduce prominence)
   ============================================= */

.cp-app-drive-content-info-box,
.cp-app-drive-infobox,
.alert-info,
.cp-banner {
    background: #111 !important;
    border: 1px solid #2a2a2a !important;
    color: #666 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
}

.cp-app-drive-content-info-box .fa,
.cp-banner .fa {
    color: #555 !important;
}

/* =============================================
   STORAGE BAR (change from blue to white/gray)
   ============================================= */

.cp-limit-bar,
.cp-limit-container {
    background: #1a1a1a !important;
    border-radius: 4px !important;
}

.cp-limit-bar .cp-limit-bar-current,
.cp-limit-usage {
    background: #444 !important;
}

.cp-limit-bar span,
.cp-limit-container span {
    color: #888 !important;
}

/* =============================================
   CONTEXT MENU
   ============================================= */

.cp-contextmenu {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
}

.cp-contextmenu a,
.cp-contextmenu button,
.cp-contextmenu li {
    color: #888 !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.15s !important;
}

.cp-contextmenu a:hover,
.cp-contextmenu button:hover,
.cp-contextmenu li:hover {
    background: #252525 !important;
    color: #fff !important;
}

.cp-contextmenu hr {
    border-color: #2a2a2a !important;
}

/* =============================================
   MODALS/DIALOGS - ALERTIFY
   ============================================= */

/* Main alertify container and all inner elements */
.alertify,
.alertify .dialog,
.alertify .ajs-dialog,
.alertify .ajs-header,
.alertify .ajs-body,
.alertify .ajs-content,
.alertify .ajs-footer,
.alertify .message,
.alertify .dialog > div,
.cp-modal,
.cp-modal-container {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #ccc !important;
}

/* Dialog box itself */
.alertify .ajs-dialog,
.alertify .dialog {
    border: 1px solid #2a2a2a !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
}

/* Message text content */
.alertify .ajs-body,
.alertify .ajs-content,
.alertify .message,
.alertify p,
.alertify span,
.alertify div {
    background: transparent !important;
    background-color: transparent !important;
    color: #ccc !important;
}

/* Headers */
.alertify .ajs-header,
.alertify h1,
.alertify h2,
.alertify h3,
.alertify h4 {
    background: transparent !important;
    color: #fff !important;
}

/* Buttons */
.alertify .dialog nav button,
.alertify .ajs-footer button,
.alertify button,
.cp-modal button {
    background: #252525 !important;
    border: 1px solid #333 !important;
    color: #888 !important;
    border-radius: 6px !important;
}

.alertify .dialog nav button:hover,
.alertify .ajs-footer button:hover,
.alertify button:hover,
.cp-modal button:hover {
    background: #333 !important;
    color: #fff !important;
}

.alertify .dialog nav button.safe,
.alertify .ajs-ok,
.btn-primary {
    background: #333 !important;
    color: #fff !important;
    border-color: #444 !important;
}

.alertify .dialog nav button.safe:hover,
.alertify .ajs-ok:hover {
    background: #444 !important;
}

/* =============================================
   SCROLLBARS
   ============================================= */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* =============================================
   LOADING SCREEN
   ============================================= */

#cp-loading,
#placeholder {
    background: #0a0a0a !important;
}

#cp-loading .cp-loading-spinner-container {
    color: #888 !important;
}

#cp-loading-message,
.placeholder-message-container {
    color: #666 !important;
}

/* =============================================
   MISC ELEMENTS
   ============================================= */

/* Links - muted, not bright blue */
a {
    color: #888 !important;
}

a:hover {
    color: #fff !important;
}

/* Badges/tags */
.cp-badge {
    background: #252525 !important;
    color: #888 !important;
    border-radius: 4px !important;
}

/* Empty state */
.cp-app-drive-content-empty {
    color: #444 !important;
}

/* Notifications */
.cp-notification {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    color: #888 !important;
}

/* Hide donate button */
.cp-toolbar-donate,
.cp-limit-upgrade,
[data-key="donate"] {
    display: none !important;
}

/* =============================================
   WALLET PANEL OVERRIDE (from JS styles)
   ============================================= */

#pft-wallet-container {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

#pft-connect-btn {
    background: #1a1a1a !important;
    color: #fff !important;
    border: none !important;
    font-weight: 500 !important;
}

#pft-connect-btn:hover {
    background: #252525 !important;
}

#pft-wallet-content {
    color: #888 !important;
}

#pft-balance {
    color: #fff !important;
    font-weight: 600 !important;
}

#pft-refresh-btn,
#pft-link-btn,
#pft-set-key-btn {
    background: #111 !important;
    border: 1px solid #2a2a2a !important;
    color: #888 !important;
    border-radius: 6px !important;
}

#pft-refresh-btn:hover,
#pft-link-btn:hover {
    background: #1a1a1a !important;
    color: #fff !important;
}

#pft-tx-list a {
    color: #888 !important;
}

#pft-tx-list a:hover {
    color: #fff !important;
}

/* =============================================
   DRIVE PAGE TITLE
   ============================================= */

.cp-app-drive-header,
.cp-app-drive-content-title {
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #fff !important;
}

/* =============================================
   FORCE OVERRIDES FOR STUBBORN ELEMENTS
   ============================================= */

/* Override any remaining blue colors */
*[style*="color: rgb(0, 0, 255)"],
*[style*="color: blue"],
*[style*="background: rgb(0, 0, 255)"],
*[style*="background: blue"] {
    color: #888 !important;
    background: transparent !important;
}

/* Override any remaining light backgrounds */
*[style*="background: rgb(255, 255, 255)"],
*[style*="background: white"],
*[style*="background-color: rgb(255, 255, 255)"],
*[style*="background-color: white"] {
    background: #1a1a1a !important;
    color: #888 !important;
}

/* =============================================
   AGGRESSIVE BUTTON OVERRIDES
   ============================================= */

/* All buttons should be dark */
button,
.btn,
input[type="button"],
input[type="submit"] {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #888 !important;
    border: 1px solid #2a2a2a !important;
}

button:hover,
.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    background: #252525 !important;
    background-color: #252525 !important;
    color: #fff !important;
    border-color: #333 !important;
}

/* Bootstrap btn overrides */
.btn-default,
.btn-secondary,
.btn-light {
    background: #1a1a1a !important;
    color: #888 !important;
    border-color: #2a2a2a !important;
}

.btn-primary,
.btn-success {
    background: #333 !important;
    color: #fff !important;
    border-color: #444 !important;
}

.btn-danger {
    background: #3a1a1a !important;
    color: #c88 !important;
    border-color: #4a2a2a !important;
}

/* Dropdown buttons */
.dropdown-toggle,
.cp-dropdown-container button {
    background: #1a1a1a !important;
    color: #888 !important;
}

/* =============================================
   DROPDOWN MENUS - AGGRESSIVE DARK OVERRIDES
   ============================================= */

/* All dropdown content containers */
.cp-dropdown-content,
.dropdown-menu,
.cp-toolbar-dropdown-content,
[class*="dropdown"] > ul,
[class*="dropdown"] > div,
.cp-dropdown-container .cp-dropdown-content {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* All items inside dropdowns */
.cp-dropdown-content *,
.dropdown-menu *,
.cp-toolbar-dropdown-content *,
.cp-dropdown-content a,
.cp-dropdown-content button,
.cp-dropdown-content span,
.cp-dropdown-content div,
.cp-dropdown-content li,
.dropdown-menu a,
.dropdown-menu button,
.dropdown-menu li {
    background: transparent !important;
    background-color: transparent !important;
    color: #aaa !important;
}

/* Hover states for dropdown items */
.cp-dropdown-content a:hover,
.cp-dropdown-content button:hover,
.cp-dropdown-content li:hover,
.cp-dropdown-content > *:hover,
.dropdown-menu a:hover,
.dropdown-menu li:hover,
.dropdown-menu button:hover {
    background: #252525 !important;
    background-color: #252525 !important;
    color: #fff !important;
}

/* Checkmarks and icons in dropdowns */
.cp-dropdown-content .cp-checkmark,
.cp-dropdown-content svg,
.cp-dropdown-content i,
.dropdown-menu .cp-checkmark,
.dropdown-menu svg,
.dropdown-menu i {
    color: inherit !important;
    background: transparent !important;
}

/* User avatar/menu button */
.cp-toolbar-user-dropdown,
.cp-toolbar-user button {
    background: transparent !important;
    border: none !important;
}

/* CryptPad specific buttons */
.cp-toolbar button,
.cp-toolbar-top button,
.cp-toolbar-bottom button {
    background: transparent !important;
    color: #888 !important;
    border: 1px solid #2a2a2a !important;
}

.cp-toolbar button:hover {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* Alertify dialog buttons */
.alertify button,
.alertify .dialog button {
    background: #252525 !important;
    color: #888 !important;
    border: 1px solid #333 !important;
}

.alertify button:hover,
.alertify button.ajs-ok,
.alertify button[data-ajs-type="ok"] {
    background: #333 !important;
    color: #fff !important;
}

/* Make sure text inputs also match */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea,
select {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid #2a2a2a !important;
}

input::placeholder,
textarea::placeholder {
    color: #555 !important;
}

/* Form controls */
.form-control {
    background: #111 !important;
    color: #fff !important;
    border-color: #2a2a2a !important;
}

/* =============================================
   HIDE UNWANTED ELEMENTS
   ============================================= */

/* Hide CryptPad branding and identity sections in dropdown */
.cp-toolbar-user-dropdown .cp-toolbar-account,
.cp-toolbar-user-dropdown .cp-displayname,
.cp-user-displayname-box,
.cp-account-box,
[data-key="displayname"],
[data-key="account"],
.cp-toolbar-user-name-box {
    display: none !important;
}

/* Hide the old wallet container if it exists */
#pft-wallet-container {
    display: none !important;
}

/* =============================================
   AGGRESSIVE SIDEBAR WHITE FIX
   ============================================= */

/* Target ALL possible white backgrounds in sidebar */
#cp-app-drive-tree *,
body.cp-app-drive #cp-app-drive-tree * {
    background-color: transparent !important;
}

/* Re-apply backgrounds only where needed */
#cp-app-drive-tree,
body.cp-app-drive #cp-app-drive-tree {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
}

/* Search container needs its own background */
#cp-app-drive-tree .cp-app-drive-tree-search-container,
body.cp-app-drive #cp-app-drive-tree .cp-app-drive-tree-search-container {
    background: #111 !important;
    background-color: #111 !important;
}

/* Hover states */
#cp-app-drive-tree li:hover,
#cp-app-drive-tree .cp-app-drive-element-row:hover,
body.cp-app-drive #cp-app-drive-tree li:hover {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
}

/* Active/selected items */
#cp-app-drive-tree .cp-leftside-active,
#cp-app-drive-tree .cp-app-drive-element-active,
body.cp-app-drive #cp-app-drive-tree .cp-leftside-active {
    background: transparent !important;
    background-color: transparent !important;
    border-left: 2px solid #fff !important;
}

/* Tree branch lines */
#cp-app-drive-tree li:before,
#cp-app-drive-tree li:after {
    border-color: #333 !important;
}

/* =============================================
   FIX DRIVE ITEM WHITE TEXT ON WHITE BG
   ============================================= */

/* Ensure all text in sidebar is readable */
#cp-app-drive-tree,
#cp-app-drive-tree *,
#cp-app-drive-tree li,
#cp-app-drive-tree span,
#cp-app-drive-tree a {
    color: #888 !important;
}

#cp-app-drive-tree li:hover,
#cp-app-drive-tree li:hover *,
#cp-app-drive-tree .cp-leftside-active,
#cp-app-drive-tree .cp-leftside-active * {
    color: #fff !important;
}

/* =============================================
   CONTEXT DOCUMENT HIGHLIGHTING
   ============================================= */

/* Context Document Badge */
.pft-context-badge,
span.pft-context-badge,
.cp-app-drive-element-name .pft-context-badge {
    color: #32cd32 !important;
    font-weight: bold !important;
    font-size: 0.75em !important;
    margin-left: 8px !important;
    background: rgba(0, 40, 0, 0.9) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #32cd32 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    box-shadow: 0 0 10px rgba(50, 205, 50, 0.5) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* Highlighted context doc row - ALL states */
.pft-context-highlight,
.pft-context-highlight:hover,
li.pft-context-highlight,
li.pft-context-highlight:hover,
.cp-app-drive-element.pft-context-highlight,
.cp-app-drive-element.pft-context-highlight:hover,
.cp-app-drive-element-row.pft-context-highlight,
.cp-app-drive-element-row.pft-context-highlight:hover,
#cp-app-drive-content .pft-context-highlight,
#cp-app-drive-content .pft-context-highlight:hover,
#cp-app-drive-content li.pft-context-highlight,
#cp-app-drive-content li.pft-context-highlight:hover {
    background: rgba(50, 205, 50, 0.15) !important;
    background-color: rgba(50, 205, 50, 0.15) !important;
    border-left: 3px solid #32cd32 !important;
}

/* Slightly brighter on hover */
#cp-app-drive-content .pft-context-highlight:hover,
#cp-app-drive-content li.pft-context-highlight:hover,
.pft-context-highlight:hover {
    background: rgba(50, 205, 50, 0.22) !important;
    background-color: rgba(50, 205, 50, 0.22) !important;
}

/* Override children backgrounds but keep badge */
.pft-context-highlight *:not(.pft-context-badge),
.pft-context-highlight:hover *:not(.pft-context-badge) {
    background-color: transparent !important;
}

/* Keep badge styled */
.pft-context-highlight .pft-context-badge,
.pft-context-highlight:hover .pft-context-badge {
    background: rgba(0, 40, 0, 0.9) !important;
    color: #32cd32 !important;
}