:root {
  --bg: #f8f9fa;
  --panel: #ffffff;
  --panel-soft: #f1f1f1;
  --line: #d8dadd;
  --side: #714b67;
  --side-deep: #5f3f57;
  --text: #343a40;
  --muted: #6c757d;
  --red: #d9534f;
  --teal: #017e84;
  --green: #28a745;
  --odoo-purple: #714b67;
  --odoo-purple-dark: #5f3f57;
  --odoo-purple-soft: #eee8ed;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 148px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 10px 12px; background: linear-gradient(180deg, var(--side), var(--side-deep)); display: flex; flex-direction: column; z-index: 10; }
.logo { margin: 0 9px 25px; display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 850; letter-spacing: -.3px; white-space: nowrap; }
.logo strong { font: inherit; }
.logo strong span { font-weight: 550; }
.brand-icon { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: #fff; color: var(--odoo-purple); font-size: 14px; font-weight: 900; }
.main-nav { display: grid; gap: 8px; }
.main-nav button, .quick-links button, .sidebar-bottom > button { width: 100%; border: 0; border-radius: 6px; padding: 10px; text-align: left; background: transparent; cursor: pointer; }
.main-nav button { font-weight: 700; }
.main-nav button span { display: inline-block; width: 23px; }
.main-nav button.active, .main-nav button:hover { background: #173963; box-shadow: inset 0 0 0 1px #ffffff16; }
.main-nav button:disabled, .quick-links button:disabled, .sidebar-bottom > button:disabled { opacity: .45; cursor: not-allowed; }
.sidebar-timer { margin-top: 18px; padding: 18px 4px 10px; border-top: 1px solid #ffffff1f; display: flex; align-items: center; gap: 8px; }
.mini-play, .play-button { display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #1c2735; cursor: pointer; }
.mini-play { width: 29px; height: 29px; font-size: 11px; }
.mini-play.stopping, .play-button.stopping { background: var(--teal); color: white; box-shadow: 0 0 0 5px #0bc2ad26; }
.sidebar-timer strong { font-size: 12px; }
.quick-links { display: grid; }
.quick-links button, .sidebar-bottom > button { padding-block: 9px; font-size: 12px; }
.quick-links button:hover, .sidebar-bottom > button:hover { background: #ffffff0c; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 2px; }
.collapse-button { border-top: 1px solid #ffffff24 !important; border-radius: 0 !important; margin-top: 7px; padding-top: 14px !important; }
.profile { display: flex; align-items: center; gap: 7px; overflow: hidden; padding: 9px 2px 0; }
.profile span, .avatar { display: grid; place-items: center; border-radius: 50%; background: #d82c39; font-weight: 800; }
.profile span { min-width: 27px; height: 27px; font-size: 11px; }
.profile strong { overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }

.workspace { min-width: 0; }
.topbar { height: 66px; padding: 0 20px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #1d2532; }
.topbar h1 { margin: 0; font-size: 15px; }
.active-timer { min-width: 285px; height: 43px; padding: 5px 12px 5px 6px; border: 1px solid #314154; border-radius: 24px; display: flex; align-items: center; gap: 10px; background: #1d3341; }
.active-timer > div { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; cursor: pointer; outline: 0; }
.active-timer > div:focus-visible { border-radius: 8px; box-shadow: 0 0 0 2px #7b8cff; }
.active-timer strong { grid-row: 1 / 3; min-width: 35px; font-size: 11px; }
.active-timer span, .active-timer b { max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; }
.active-timer span { color: #f381d0; }
.active-timer b { font-size: 11px; }
.play-button { width: 32px; height: 32px; flex: 0 0 auto; font-size: 11px; }
.avatar { justify-self: end; width: 31px; height: 31px; border: 0; font-size: 12px; }
.app-shell.sidebar-collapsed { grid-template-columns: 58px minmax(0, 1fr); }
.sidebar-collapsed .logo { font-size: 0; text-align: center; }
.sidebar-collapsed .logo::before { content: none; }
.sidebar-collapsed .logo strong, .sidebar-collapsed .quick-links, .sidebar-collapsed .sidebar-bottom > button, .sidebar-collapsed .sidebar-timer strong, .sidebar-collapsed .profile strong { display: none; }
.sidebar-collapsed .logo { margin-inline: 0; justify-content: center; }
.sidebar-collapsed .brand-icon { font-size: 14px; }
.sidebar-collapsed .main-nav button { padding-inline: 0; font-size: 0; text-align: center; }
.sidebar-collapsed .main-nav button span { width: auto; font-size: 17px; }
.sidebar-collapsed .profile { justify-content: center; }

.app-view { display: none; }
.app-view.active { display: block; }
.work-layout { min-height: calc(100vh - 66px); display: block; }
.project-panel { position: relative; min-width: 0; padding: 14px 12px 55px; border-right: 1px solid var(--line); overflow-y: auto; max-height: calc(100vh - 66px); }
.work-layout.projects-collapsed { grid-template-columns: 52px minmax(0, 1fr); }
.projects-collapsed .project-panel > :not(.panel-title) { display: none; }
.projects-collapsed .panel-title h2 { display: none; }
.projects-collapsed .panel-title { justify-content: center; }
.panel-title, .task-heading, .projects-heading { display: flex; align-items: center; justify-content: space-between; }
.panel-title h2, .task-heading h2 { margin: 0; font-size: 14px; }
.panel-title button { border: 0; background: transparent; cursor: pointer; }
.selected-filter { width: 100%; margin: 20px 0 14px; padding: 8px 10px; border: 0; border-radius: 5px; background: #2d3748; color: #7c91ff; text-align: left; font-size: 11px; }
.projects-heading { padding: 0 7px 7px; font-size: 10px; }
.projects-heading strong { font-size: 11px; }
.projects-heading span { color: #d0d6df; }
.project-search { display: flex; align-items: center; gap: 6px; padding: 7px; border-bottom: 1px solid var(--line); color: var(--muted); }
.project-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
.project-list { display: grid; padding: 8px 4px; }
.project-item { padding: 9px 4px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.project-item:hover { background: #ffffff08; }
.project-item small { display: block; margin-bottom: 3px; color: #c4ccd8; font-size: 8px; }
.project-item strong { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.project-item i, .project-group header i { width: 14px; height: 14px; border-radius: 2px; flex: 0 0 auto; }
.project-item > div { width: 27px; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 4px; background: #59677c; }
.project-item em { display: block; height: 100%; background: var(--red); }
.project-item p { display: inline; margin-left: 32px; color: #d5dbe5; font-size: 8px; }
.project-empty { padding: 25px 8px; color: var(--muted); font-size: 11px; }
.team-footer { position: absolute; bottom: 0; left: 12px; right: 12px; padding: 15px 7px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; }

.task-workspace { width: min(1280px, 100%); min-width: 0; margin: 0 auto; padding: 20px 28px 60px; }
.task-heading { height: 28px; margin-bottom: 18px; }
.task-heading small { font-size: 10px; }
.task-heading span { font-size: 9px; font-weight: 800; }
.task-list { display: grid; gap: 28px; }
.task-search-toolbar { width: min(720px, 100%); margin: 0 auto 20px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; gap: 8px; background: #fff; color: var(--muted); box-shadow: 0 1px 2px #343a400a; }
.task-search-toolbar:focus-within { border-color: var(--teal); box-shadow: 0 0 0 2px #017e841a; }
.task-search-toolbar input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.task-load-sentinel { padding: 24px; color: var(--muted); text-align: center; font-size: 11px; }
.task-load-sentinel[hidden] { display: none; }
.project-group header { height: 26px; display: flex; align-items: center; gap: 8px; }
.project-group header span { color: #fff; font-size: 13px; }
.project-group header h3 { margin: 0; font-size: 14px; }
.work-task { min-height: 37px; padding: 0 7px 0 20px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 18px minmax(140px, 1fr) auto 92px 30px; align-items: center; gap: 7px; font-size: 11px; }
.work-task:hover { background: #232d3b; }
.work-task.running { background: #273343; }
.circle-action { width: 14px; height: 14px; padding: 0; border: 1px solid #77869b; border-radius: 50%; background: transparent; font-size: 7px; cursor: pointer; }
.work-task.running .circle-action { border-color: var(--teal); background: var(--teal); }
.task-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 550; }
.task-hours { text-align: right; }
.task-hours b { color: var(--teal); }
.work-task time { color: var(--red); text-align: right; }
.row-timer { justify-self: end; width: 23px; height: 23px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #28577a; cursor: pointer; font-size: 9px; }
.work-task.running .row-timer { background: var(--teal); color: white; box-shadow: 0 0 0 4px #12bdad22; }

.notice { min-height: 0; font-size: 11px; }
.notice:not(:empty) { margin-bottom: 12px; padding: 9px 11px; border-radius: 5px; background: #283549; }
.notice.error { border-left: 3px solid var(--red); }
.notice.success { border-left: 3px solid var(--green); }
.empty, .loading { padding: 42px; color: var(--muted); text-align: center; }

.hours-toolbar { height: 56px; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; }
.hours-toolbar button, .month-switcher, .view-mode { border: 1px solid var(--line); border-radius: 4px; background: transparent; }
.month-switcher { height: 34px; display: flex; align-items: center; }
.month-switcher button { width: 37px; height: 100%; border: 0; cursor: pointer; font-size: 20px; }
.month-switcher strong { min-width: 75px; text-align: center; font-size: 11px; }
.view-mode { padding: 8px 11px; }
.hours-layout { min-height: calc(100vh - 122px); display: grid; grid-template-columns: 420px minmax(0, 1fr); border-top: 1px solid var(--line); }
.calendar-panel { padding: 9px; border-right: 1px solid var(--line); }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.weekdays span { padding: 7px 0; text-align: center; font-size: 8px; font-weight: 800; }
.calendar-day { position: relative; min-height: 66px; padding: 8px 3px 5px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; }
.calendar-day:nth-child(-n+7) { border-top: 1px solid var(--line); }
.calendar-day:nth-child(7n+1) { border-left: 1px solid var(--line); }
.calendar-day:hover, .calendar-day.selected { background: #263142; }
.calendar-day.outside { opacity: .35; }
.calendar-day strong { display: block; margin-top: 5px; font-size: 10px; }
.day-bubble { width: 31px; height: 31px; margin: auto; border-radius: 50%; display: grid; place-items: center; background: #6c788b; color: #fff; font-size: 8px; }
.calendar-day:not(.outside):not(:nth-child(7n)):not(:nth-child(7n-1)) .day-bubble { background: var(--red); }
.calendar-day.today strong { color: #8d92ff; }
.calendar-day.selected { box-shadow: inset 0 0 0 1px #566579; }
.day-panel { min-width: 0; padding: 0 15px; }
.day-heading { height: 72px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.day-heading div { display: grid; color: #7888ff; font-size: 12px; }
.day-heading b { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; background: var(--red); font-size: 8px; }
.history-list { padding-top: 10px; }
.empty-day { padding: 28px 0; color: #3d495b; text-align: center; font-size: 11px; }
.time-entry { margin-bottom: 8px; padding: 12px; border-radius: 4px; background: #293547; display: grid; grid-template-columns: 1fr auto; }
.time-entry.running { background: var(--teal); color: white; }
.time-entry.editable { cursor: pointer; }
.time-entry.editable:hover { box-shadow: inset 0 0 0 1px #7282ff; }
.time-entry > div { display: grid; }
.time-entry small { font-size: 8px; }
.time-entry strong { font-size: 11px; }
.time-entry > button { width: 23px; height: 23px; border: 0; border-radius: 50%; background: #164e55; color: white; }
.time-entry footer { grid-column: 1 / -1; margin-top: 32px; display: flex; justify-content: space-between; align-items: center; font-size: 9px; }
.time-entry footer b { margin-left: auto; }
.time-entry .retry-button { margin-left: 10px; }

.editor-backdrop { position: fixed; inset: 0; z-index: 50; padding: 24px; background: #080d14a6; display: flex; align-items: center; justify-content: center; }
.editor-backdrop[hidden] { display: none; }
.entry-editor { position: relative; width: min(570px, 96vw); max-height: min(720px, 94vh); overflow-y: auto; border: 1px solid #526077; border-radius: 12px; background: #202937; box-shadow: 0 24px 70px #050810b3; will-change: transform; }
.entry-editor form { padding: 22px; display: flex; flex-direction: column; gap: 17px; }
.entry-editor header { display: flex; align-items: center; justify-content: space-between; cursor: grab; user-select: none; touch-action: none; }
.entry-editor.dragging header { cursor: grabbing; }
.entry-editor h2 { margin: 0; font-size: 15px; }
.entry-editor header button { border: 0; background: transparent; font-size: 29px; cursor: pointer; }
.editor-help { margin: -7px 0 0; padding: 10px 12px; border-radius: 6px; background: #283548; color: #c3cddd; font-size: 11px; line-height: 1.45; }
.entry-editor label { display: grid; gap: 7px; color: #dce3ee; font-size: 10px; font-weight: 750; }
.entry-editor input, .entry-editor textarea, .entry-editor select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 5px; outline: 0; background: #1d2532; color: white; }
.entry-editor input:focus, .entry-editor textarea:focus, .entry-editor select:focus { border-color: #7181ff; }
.time-fields { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.time-fields > span { padding-top: 20px; color: var(--muted); font-size: 10px; }
.time-fields fieldset { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 7px; }
.time-fields legend { padding: 0 5px; color: #dce3ee; font-size: 10px; font-weight: 750; }
.clock-selects { display: grid; grid-template-columns: 1fr auto 1fr 1.2fr; align-items: center; gap: 5px; }
.clock-selects select { padding: 10px 7px; font-size: 12px; font-weight: 750; }
.duration-preview { padding: 13px 15px; border-radius: 7px; display: flex; justify-content: space-between; align-items: center; background: #17202e; }
.duration-preview span { color: var(--muted); font-size: 10px; }
.duration-preview output { color: var(--teal); font-size: 17px; font-weight: 850; }
.editor-task { padding: 13px; border: 1px solid var(--line); border-radius: 5px; display: grid; gap: 6px; }
.editor-task small { color: var(--muted); }
.editor-task strong { font-size: 12px; }
.editor-error { min-height: 16px; margin: 0; color: #ff8d92; font-size: 11px; }
.entry-editor footer { padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.entry-editor footer button { padding: 10px 20px; border: 1px solid var(--line); border-radius: 5px; background: #293547; cursor: pointer; font-weight: 800; }
.entry-editor footer .save-entry { border-color: #0f111d; background: #0f111d; }
.entry-editor footer button:disabled { opacity: .55; }
.stop-dialog { width: min(500px, 96vw); }
.stop-dialog textarea { min-height: 110px; resize: vertical; }
.task-picker-dialog { width: min(620px, 96vw); }
.task-picker-content { padding: 22px; display: flex; flex-direction: column; gap: 17px; }
.task-picker-content > header { display: flex; align-items: center; justify-content: space-between; cursor: grab; user-select: none; touch-action: none; }
.task-picker-content > header button { border: 0; background: transparent; font-size: 29px; cursor: pointer; }
.task-picker-search { display: grid; gap: 7px; color: #dce3ee; font-size: 10px; font-weight: 750; }
.task-picker-search input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 5px; outline: 0; background: #1d2532; color: white; }
.task-picker-search input:focus { border-color: #7181ff; }
.task-picker-list { max-height: min(420px, 52vh); overflow-y: auto; display: grid; gap: 8px; }
.task-picker-option { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: #263142; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.task-picker-option:hover, .task-picker-option:focus-visible { border-color: #7181ff; background: #2b374a; outline: 0; }
.task-picker-option i { width: 12px; height: 12px; border-radius: 3px; }
.task-picker-option span { min-width: 0; display: grid; gap: 3px; }
.task-picker-option small { overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.task-picker-option strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task-picker-option b { padding: 6px 10px; border-radius: 16px; background: #fff; color: #28577a; font-size: 10px; }
.task-picker-empty { padding: 28px; color: var(--muted); text-align: center; }
.task-picker-content > footer { padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.task-picker-content > footer button { padding: 10px 20px; border: 1px solid var(--line); border-radius: 5px; background: #293547; cursor: pointer; font-weight: 800; }

.login-shell { min-height: 100vh; padding: 24px; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #294a7c 0, transparent 32%), var(--bg); }
.login-card { width: min(430px, 100%); padding: 42px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 18px 50px #0a0f1880; }
.brand-mark { width: 52px; height: 52px; margin-bottom: 25px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, #ff7478, #ff4d54); font-weight: 900; }
.eyebrow { margin: 0; color: #8fa0b8; font-size: 11px; letter-spacing: 1.5px; font-weight: 800; }
.login-card h1 { margin: 6px 0; font-size: 31px; }
.muted { color: var(--muted); line-height: 1.55; }
.login-form { display: grid; gap: 17px; margin-top: 28px; }
.login-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; }
.login-form input { padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #171e2b; color: white; }
.login-form input:focus { border-color: #7294c8; }
.login-help { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.4; }
.login-help b { color: #ff9b9e; }
.login-help b.complete { color: var(--green); }
.secret-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.secret-input input { min-width: 0; border-radius: 8px 0 0 8px; }
.secret-input button { padding: 0 13px; border: 1px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0; background: #263143; color: #dce6f6; cursor: pointer; font-size: 11px; font-weight: 700; }
.primary-button { padding: 13px; border: 0; border-radius: 8px; background: var(--red); color: white; font-weight: 800; cursor: pointer; }
.primary-button:disabled { opacity: .6; }
.form-error { min-height: 18px; margin: 0; color: #ff8e92; font-size: 13px; }

/* Tema visual inspirado en Odoo: superficies claras, morado institucional y acentos turquesa. */
html, body { background: var(--bg); color: var(--text); }
.sidebar { background: linear-gradient(180deg, var(--odoo-purple), var(--odoo-purple-dark)); color: #fff; box-shadow: 2px 0 8px #343a4026; }
.main-nav button.active, .main-nav button:hover { background: #ffffff24; box-shadow: inset 3px 0 0 #fff; }
.quick-links button:hover, .sidebar-bottom > button:hover { background: #ffffff17; }
.mini-play, .play-button { background: var(--odoo-purple); color: #fff; }
.sidebar .mini-play { background: #fff; color: var(--odoo-purple); }
.mini-play.stopping, .play-button.stopping { background: var(--teal); box-shadow: 0 0 0 5px #017e8424; }
.profile span, .avatar { background: var(--odoo-purple); color: #fff; }

.workspace { background: var(--bg); }
.topbar { border-top: 4px solid var(--odoo-purple); border-bottom-color: var(--line); background: #fff; box-shadow: 0 1px 3px #343a4014; }
.active-timer { border-color: #cfd3d7; background: #f1f3f5; }
.active-timer > div:focus-visible { box-shadow: 0 0 0 2px #017e8445; }
.active-timer span { color: var(--odoo-purple); }
.project-panel { background: #fff; }
.panel-title button { color: var(--odoo-purple); }
.selected-filter { background: var(--odoo-purple-soft); color: var(--odoo-purple); font-weight: 700; }
.projects-heading span, .project-item small, .project-item p { color: var(--muted); }
.project-search input { color: var(--text); }
.project-item:hover { background: #f2f2f2; }
.project-item > div { background: #d9dcdf; }
.task-workspace { background: var(--bg); }
.task-heading span { color: var(--odoo-purple); }
.project-group { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 1px 2px #343a400a; }
.project-group header { padding: 8px 14px; border-bottom: 1px solid var(--line); background: #f6f6f6; }
.project-group header span { color: var(--odoo-purple); }
.work-task { padding-inline: 14px; }
.work-task:hover { background: #f5f5f5; }
.work-task.running { background: #e2f2f3; }
.circle-action { border-color: #8c9298; }
.row-timer { background: var(--odoo-purple); color: #fff; }
.notice:not(:empty) { border: 1px solid #d6d8db; background: #fff; }

.hours-toolbar { border-bottom: 1px solid var(--line); background: #fff; }
.hours-toolbar button, .month-switcher, .view-mode { background: #fff; }
.calendar-panel, .day-panel { background: #fff; }
.calendar-day:hover { background: #f3f3f3; }
.calendar-day.selected { background: #d7eef0; box-shadow: inset 0 0 0 1px #8bcdd1; }
.calendar-day.today strong, .day-heading div { color: var(--teal); }
.day-bubble { background: #adb5bd; }
.calendar-day:not(.outside):not(:nth-child(7n)):not(:nth-child(7n-1)) .day-bubble { background: var(--odoo-purple); }
.calendar-day.selected .day-bubble { background: var(--teal) !important; }
.day-heading b { background: var(--teal); color: #fff; }
.empty-day { color: var(--muted); }
.time-entry { border: 1px solid var(--line); border-left: 4px solid var(--odoo-purple); background: #fff; }
.time-entry.running { border-color: var(--teal); background: var(--teal); color: #fff; }
.time-entry.editable:hover { box-shadow: 0 0 0 2px #714b6726; }
.time-entry > button { background: var(--odoo-purple); }

.editor-backdrop { background: #343a4073; }
.entry-editor { border-color: #c9cccf; background: #fff; box-shadow: 0 24px 70px #343a4047; }
.entry-editor header { margin: -22px -22px 0; padding: 14px 18px; border-radius: 11px 11px 0 0; background: var(--odoo-purple); color: #fff; }
.entry-editor header button, .task-picker-content > header button { color: inherit; }
.editor-help { background: #f1f3f5; color: #59616a; }
.entry-editor label, .time-fields legend, .task-picker-search { color: var(--text); }
.entry-editor input, .entry-editor textarea, .entry-editor select, .task-picker-search input { border-color: #cfd3d7; background: #fff; color: var(--text); }
.entry-editor input:focus, .entry-editor textarea:focus, .entry-editor select:focus, .task-picker-search input:focus { border-color: var(--teal); box-shadow: 0 0 0 2px #017e841a; }
.duration-preview { background: #f1f3f5; }
.entry-editor footer button, .task-picker-content > footer button { background: #fff; color: var(--text); }
.entry-editor footer .save-entry { border-color: var(--odoo-purple); background: var(--odoo-purple); color: #fff; }
.task-picker-content > header { margin: -22px -22px 0; padding: 14px 18px; border-radius: 11px 11px 0 0; background: var(--odoo-purple); color: #fff; }
.task-picker-option { background: #fff; }
.task-picker-option:hover, .task-picker-option:focus-visible { border-color: var(--teal); background: #f2f8f8; }
.task-picker-option b { background: var(--odoo-purple); color: #fff; }
.load-more, .retry-button { border-color: var(--line); background: #fff; color: var(--odoo-purple); }

.login-shell { background: linear-gradient(135deg, #e9e5ef 0%, #f8f9fa 48%, #eee8ed 100%); }
.login-card { border-color: #d6d8db; background: #fff; box-shadow: 0 18px 50px #343a4026; }
.brand-mark { background: var(--odoo-purple); color: #fff; }
.eyebrow { color: var(--odoo-purple); }
.login-form input { border-color: #cfd3d7; background: #fff; color: var(--text); }
.login-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 2px #017e841a; }
.secret-input button { border-color: #cfd3d7; background: #f1f3f5; color: var(--text); }
.primary-button { background: var(--odoo-purple); }
.primary-button:hover { background: var(--odoo-purple-dark); }
.form-error, .editor-error { color: #c9302c; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 72px 1fr; }
  .sidebar { padding-inline: 8px; }
  .logo { font-size: 0; text-align: center; }
  .logo::before { content: none; }
  .logo strong, .main-nav button, .quick-links button, .sidebar-bottom > button { font-size: 0; text-align: center; }
  .logo { margin-inline: 0; justify-content: center; }
  .brand-icon { font-size: 14px; }
  .main-nav button span { width: auto; font-size: 18px; }
  .sidebar-timer strong, .profile strong { display: none; }
  .profile { justify-content: center; }
  .hours-layout { grid-template-columns: 360px 1fr; }
}

@media (max-width: 680px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; top: auto; bottom: 0; width: 100%; height: 60px; padding: 7px; flex-direction: row; }
  .logo, .sidebar-timer, .quick-links, .sidebar-bottom { display: none; }
  .main-nav { width: 100%; display: flex; justify-content: space-around; }
  .main-nav button { width: auto; min-width: 70px; }
  .workspace { padding-bottom: 60px; }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar > div:first-child, .avatar { display: none; }
  .active-timer { min-width: 0; justify-self: stretch; }
  .task-workspace { padding: 15px 10px 30px; }
  .work-task { grid-template-columns: 18px minmax(100px, 1fr) auto 26px; }
  .work-task time { display: none; }
  .hours-layout { display: block; }
  .calendar-panel { border-right: 0; }
  .day-panel { min-height: 280px; }
  .editor-backdrop { padding: 8px; }
  .entry-editor { max-height: 96vh; }
  .time-fields { grid-template-columns: 1fr; }
  .time-fields > span { padding: 0; text-align: center; }
}