/* MONDAY.COM THEME OVERRIDES */

/* Base Font & Body */
body,
.app-shell,
.layout {
    font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    background-color: #f7f9fc !important;
}

h1,
h2,
h3,
h4,
.board-header h1,
.dashboard-head h2 {
    font-family: 'Roboto', 'Inter', sans-serif !important;
    font-weight: 500 !important;
}

/* Sidebar Styling */
.sidebar {
    background-color: #ffffff !important;
    /* Clear sidebar */
    border-right: 1px solid #e6e9ef !important;
    color: #323338 !important;
    padding: 16px 12px !important;
}

.workspace-block,
.boards-head,
.board-tree,
.sidebar-footer .mini-stats .stat {
    background-color: transparent !important;
    border: none !important;
    color: #323338 !important;
    box-shadow: none !important;
}

.workspace-block .workspace-head h3,
.boards-head h3 {
    color: #676879 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
}

.workspace-item,
.board-item,
.nav-item,
.sidebar button {
    color: #323338 !important;
    border: none !important;
    background-color: transparent !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
}

.board-item.active,
.board-item:hover,
.workspace-item.active,
.workspace-item:hover,
.nav-item.active,
.nav-item:hover {
    background-color: #e6e9ef !important;
    color: #323338 !important;
}

.selector-btn,
.sidebar-plus-btn {
    background-color: #f5f6f8 !important;
    border: 1px solid #c9cdd2 !important;
    color: #323338 !important;
    border-radius: 4px !important;
}

.sidebar .ghost:hover,
.sidebar .workspace-header-menu-btn:hover {
    background-color: #e6e9ef !important;
    color: #323338 !important;
}

/* Sidebar Stat boxes */
.mini-stats .stat {
    background-color: #f5f6f8 !important;
    border: 1px solid #e6e9ef !important;
    border-radius: 8px !important;
}

.mini-stats .stat b,
.mini-stats .stat span {
    color: #323338 !important;
}

/* Topbar Styling */
.topbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e6e9ef !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    min-height: 56px !important;
}

.product-label {
    color: #323338 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
}

.icon-btn {
    border: none !important;
    background: transparent !important;
    color: #676879 !important;
}

.icon-btn:hover {
    background-color: #f5f6f8 !important;
    color: #323338 !important;
}

/* Content Area & Board Header */
.content {
    background-color: #f7f9fc !important;
}

.board-view,
.home-view {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    padding: 24px !important;
}

.board-header {
    border-bottom: none !important;
    padding-bottom: 16px !important;
}

.board-header h1 {
    font-size: 32px !important;
    color: #323338 !important;
    letter-spacing: normal !important;
    font-weight: 600 !important;
}

/* Monday Buttons */
button,
.btn {
    border-radius: 4px !important;
    font-weight: 400 !important;
}

#newItemBtn,
#newWorkspaceBtn,
#newBoardBtn,
#newFolderBtn,
#newColumnBtn,
button[type="submit"] {
    background-color: #0073ea !important;
    /* Monday Blue */
    border-color: #0073ea !important;
    color: white !important;
    border-radius: 4px !important;
    transition: background-color 0.1s;
}

#newItemBtn:hover,
#newWorkspaceBtn:hover,
#newBoardBtn:hover,
#newFolderBtn:hover,
#newColumnBtn:hover,
button[type="submit"]:hover {
    background-color: #0060b9 !important;
}

button.ghost,
.board-quick-filters button.ghost,
.board-toolbar button {
    background-color: transparent !important;
    color: #323338 !important;
    border: 1px solid transparent !important;
}

button.ghost:hover,
.board-quick-filters button.ghost:hover,
.board-toolbar button:hover {
    background-color: #f5f6f8 !important;
}

/* Tabs */
.view-tabs {
    border-bottom: 1px solid #e6e9ef !important;
    margin-bottom: 16px !important;
}

.view-tab {
    color: #676879 !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.view-tab.active {
    color: #0073ea !important;
    border-bottom: 2px solid #0073ea !important;
}

/* Table Design */
.table-wrap {
    border: none !important;
    box-shadow: none !important;
    border-top: 1px solid #e6e9ef !important;
    border-radius: 0 !important;
}

.task-table {
    border-collapse: collapse !important;
}

.task-table th {
    background-color: #ffffff !important;
    border-bottom: 2px solid #e6e9ef !important;
    border-right: 1px solid #e6e9ef !important;
    color: #676879 !important;
    text-transform: capitalize !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 10px 12px !important;
}

.task-table td {
    border-bottom: 1px solid #e6e9ef !important;
    border-right: 1px solid #e6e9ef !important;
    padding: 0 !important;
    /* Remove padding to allow full cell color */
    font-size: 14px !important;
    color: #323338 !important;
}

/* Target internal table elements for padding */
.task-table td>strong,
.task-table td>input[type="text"]:not(.nav-cell) {
    padding: 10px 12px;
    display: block;
}

.task-table td.col-select,
.task-table td.col-drag {
    padding: 10px !important;
}

/* Group Title Rows */
.group-title-row td {
    background-color: #ffffff !important;
    color: #579bfc !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border: none !important;
    border-bottom: 1px solid #e6e9ef !important;
    padding-top: 32px !important;
    padding-bottom: 12px !important;
    padding-left: 20px !important;
}

.group-title-btn {
    color: #579bfc !important;
    font-size: 18px !important;
    background: transparent !important;
    border: none !important;
    font-weight: 500 !important;
}

/* Left colored border for items in a group (Monday signature) */
.task-row td:first-child {
    border-left: 6px solid #579bfc !important;
    box-sizing: border-box;
}

/* Status Cells Full Fill */
.status-cell {
    position: relative !important;
    border-right: 2px solid #ffffff !important;
    /* White gap between colored cells */
}

/* Clear all nested styles and appearance */
.status-cell>select,
.status-cell>span,
.status-cell>.priority {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    /* Padding applied inside select/span */
    border: none !important;
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    text-align: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    box-sizing: border-box;
    text-transform: capitalize !important;
    border-radius: 0 !important;
}

/* The actual colors */
.status-cell.todo {
    background-color: #c4c4c4 !important;
}

.status-cell.in_progress {
    background-color: #fdab3d !important;
}

.status-cell.done {
    background-color: #00c875 !important;
}

/* Status hover effect slightly darkens */
.status-cell:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

/* Priorities similar full-fill logic */
.priority.high {
    background-color: #e2445c !important;
    color: white !important;
}

.priority.medium {
    background-color: #a25ddc !important;
    color: white !important;
}

/* Purple for medium */
.priority.low {
    background-color: #579bfc !important;
    color: white !important;
}

/* Inputs inside tables */
.task-table .inline-cell-input {
    border: 1px solid transparent !important;
    background: transparent !important;
    width: 100% !important;
    height: 100% !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    transition: all 0.1s !important;
    margin: 0 !important;
}

.task-table .inline-cell-input:hover,
.task-table .inline-cell-input:focus {
    border: 1px solid #0073ea !important;
    background: #ffffff !important;
    border-radius: 4px !important;
}

/* Inline Add Item (Ghost bottom row) */
.add-item-inline-row td {
    border-bottom: none !important;
    border-right: none !important;
    padding: 6px 12px !important;
}

.inline-add-item-input {
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #a4a9b4 !important;
    padding: 8px 10px !important;
    width: 100% !important;
    border-radius: 4px !important;
}

.inline-add-item-input:focus,
.inline-add-item-input:hover {
    border: 1px solid #0073ea !important;
    background: #ffffff !important;
    color: #323338 !important;
}

/* Modals */
.modal {
    z-index: 9999 !important;
}

.modal-card {
    border-radius: 8px !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
}

.modal-head h3 {
    font-size: 20px !important;
    color: #323338 !important;
    font-weight: 500 !important;
}

/* Dashboard KPI changes */
.kpi-card {
    border: 1px solid #e6e9ef !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    border-radius: 8px !important;
}

.kpi-card b {
    color: #323338 !important;
    font-weight: 500 !important;
}

/* Hide Drag handles to keep checkboxes permanently visible without clutter */
.col-drag,
.drag-handle {
    display: none !important;
}