/* Time workspace: compact, explicit methods with the existing timer engine. */ #addTimePanel { padding:24px clamp(16px,3vw,42px) 36px;background:#f5f7fb;color:#2d405a; } #addTimePanel > * { max-width:1380px;margin-inline:auto; } #addTimePanel .at-page-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px; } #addTimePanel .at-page-heading > div > span { color:#8c9bb1;font-size:11px; } #addTimePanel .at-page-heading h1 { margin:5px 0 8px;font-size:25px;color:#273c59; } #addTimePanel .at-page-heading p { margin:0;color:#8190a6;font-size:12px;line-height:1.9; } #addTimePanel .at-page-heading a { text-decoration:none;white-space:nowrap;color:#6384c7;font-size:12px;border:1px solid #dae4f5;background:#fff;border-radius:9px;padding:10px 13px; } #addTimePanel > .entity-scope-tabs { display:flex;width:fit-content;margin-inline:0 auto;margin-bottom:18px;padding:4px;border:1px solid #e3e9f3;border-radius:10px;background:#fff; } #addTimePanel .entity-scope-tabs button { background:transparent;color:#8a99b0;border:0;border-radius:7px;padding:8px 15px;font:inherit;font-size:11px; } #addTimePanel .entity-scope-tabs button.active { background:#edf2ff;color:#5578c7; } #addTimePanel .at-workbench { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;margin-bottom:0; } #addTimePanel :is(.at-live-card,.at-manual-card) { border:1px solid #e0e7f1;border-radius:18px;padding:25px;background:#fff;min-width:0; } #addTimePanel .at-live-card { background:linear-gradient(145deg,#f7faff,#fff 65%);border-color:#d6e2f6; } #addTimePanel .at-card-heading { display:flex;align-items:center;gap:12px; } #addTimePanel .at-method-number { display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:11px;color:#6c8ac7;background:#ecf2fc;font-size:12px; } #addTimePanel .at-manual-card .at-method-number { color:#299579;background:#ebf7f2; } #addTimePanel .at-card-heading h2 { font-size:15px;color:#3d5372;margin:0 0 5px; } #addTimePanel .at-card-heading p { margin:0;font-size:11px;color:#94a0b2;line-height:1.8; } #addTimePanel .at-status { margin-inline-start:auto;white-space:nowrap;font-size:10px;border:1px solid #dce6f5;color:#8295b3;background:#f3f7fd;padding:5px 9px;border-radius:20px; } #addTimePanel #addTimeDisplay { display:block;direction:ltr;font-variant-numeric:tabular-nums;text-align:center;font-size:clamp(38px,4.5vw,62px);letter-spacing:3px;line-height:1.4;color:#3a5480;margin:27px 0 24px;font-weight:500;text-shadow:none; } #addTimePanel .at-timer-actions { display:flex;align-items:center;justify-content:center;gap:10px;min-height:43px; } #addTimePanel .at-timer-actions button { border:1px solid #dce5f3;border-radius:10px;min-height:43px;padding:10px 23px;font:inherit;font-size:12px;cursor:pointer;box-shadow:none; } #addTimePanel .at-timer-actions .at-primary { color:#fff;background:#527bd3;border-color:#527bd3;min-width:160px; } #addTimePanel .at-timer-actions .add-time-save-btn { background:#168769;color:#fff;border-color:#168769; } #addTimePanel .at-timer-actions .add-time-pause-btn { background:#fff6e9;color:#b18748;border-color:#eedfc7; } #addTimePanel .at-timer-actions .add-time-cancel-btn { background:#fff;color:#a48b91;border-color:#eadfe3; } #addTimePanel #addTimeTimerStopBox { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:0;padding:0;background:transparent;border:0; } #addTimePanel #addTimeTimerStopBox.is-hidden { display:none; } #addTimePanel .at-timer-footnote { font-size:10px;color:#a0adbf;text-align:center;margin:14px 0 0;line-height:1.9; } #addTimePanel .at-manual-example { display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:30px 0 25px; } #addTimePanel .at-manual-example > span { font-size:11px;color:#99a7b9; } #addTimePanel .at-manual-example strong { font-size:30px;color:#608777;font-weight:400; } #addTimePanel .at-manual-example small { font-size:13px;color:#97ada3; } #addTimePanel .at-manual-button { display:block;margin:auto;min-height:43px;min-width:190px;border:1px solid #beded0;background:#edf8f3;color:#258568;border-radius:10px;font:inherit;font-size:12px;padding:10px 22px;cursor:pointer; } #addTimePanel #addTimeMessage:empty { display:none; } #addTimePanel #addTimeMessage { margin-block:12px;padding:10px 14px;border-radius:9px;background:#edf5ff;font-size:12px; } #addTimePanel .add-time-stats-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-block:20px; } #addTimePanel .add-time-stat-card { display:flex;align-items:center;gap:13px;min-height:91px;padding:17px 20px;background:#fff;border:1px solid #e3e9f2;border-radius:13px;box-shadow:none; } #addTimePanel .add-time-stat-card::before,#addTimePanel .add-time-stat-card::after { display:none; } #addTimePanel .add-time-stat-icon { display:grid;place-items:center;width:35px;height:35px;min-width:35px;background:#f1f5fc;color:#8a9fc6;border-radius:10px;box-shadow:none; } #addTimePanel .add-time-stat-icon svg { width:19px;height:19px; } #addTimePanel .add-time-stat-body small { color:#91a0b5;font-size:11px; } #addTimePanel .add-time-stat-body strong { display:block;margin-top:7px;color:#4d6385;font-size:20px;font-variant-numeric:tabular-nums;direction:ltr;font-weight:500; } #addTimePanel .add-time-recent-card { border:1px solid #e1e8f2;background:#fff;border-radius:16px;box-shadow:none;padding:23px; } #addTimePanel .add-time-recent-card > h2 { display:flex;align-items:center;gap:8px;font-size:15px;color:#4b607f;margin:0 0 20px; } #addTimePanel .add-time-recent-card > h2 svg { width:19px;height:19px;color:#829cc6; } #addTimePanel .add-time-recent-filter-tabs { display:flex;align-items:center;flex-wrap:wrap;gap:7px; } #addTimePanel .add-time-recent-filter-tabs > button,#addTimePanel .add-time-recent-date-wrap > button { min-height:34px;border:1px solid #e2e8f3;border-radius:8px;background:#fff;color:#8696af;padding:7px 14px;font-size:11px;box-shadow:none; } #addTimePanel .add-time-recent-filter-tabs > button.active { color:#5277c8;background:#edf3ff;border-color:#d1dffa; } #addTimePanel .add-time-table-wrap { overflow-x:auto;margin-top:16px; } #addTimePanel .add-time-table { min-width:680px;width:100%;border-collapse:collapse; } #addTimePanel .add-time-table th { background:#f7f9fc;color:#8d9cb2;font-size:11px;font-weight:400;padding:12px;border-bottom:1px solid #e5ebf3; } #addTimePanel .add-time-table td { padding:16px 12px;border-bottom:1px solid #edf1f6;color:#647996;font-size:12px; } #addTimePanel .add-time-empty { padding:35px !important;color:#a3afc0 !important; } #addTimePanel :is(button,a,input,select,textarea):focus-visible { outline:2px solid #91ace4;outline-offset:3px; } #addTimePanel button:disabled { opacity:.55;cursor:wait; } #addTimePanel :is(#addTimeManualModal,#addTimeControlsModal,#addTimeRecentEditModal) .project-modal-card { border:1px solid #dce6f3;border-radius:18px;background:#fff;box-shadow:0 22px 70px #21344f22;padding:28px; } #addTimePanel :is(.add-time-manual-head,.add-time-controls-head) h2 { color:#3e5577;font-size:20px; } #addTimePanel :is(.add-time-manual-head,.add-time-controls-head) p { color:#90a0b6;font-size:12px; } #addTimePanel .at-description-field { display:block;font-size:12px;color:#7386a2;margin:18px 0; } #addTimePanel .at-description-field > span { color:#a7b3c4;font-size:10px;margin-inline-start:6px; } #addTimePanel .at-description-field input { display:block;width:100%;margin-top:8px;background:#fafbfd;border:1px solid #dfe7f2;border-radius:9px;padding:12px;color:#445f81;font:inherit;font-size:12px; } #addTimePanel .at-duration-presets { display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:16px 0; } #addTimePanel .at-duration-presets > span { color:#99a8bc;font-size:10px;margin-inline-end:6px; } #addTimePanel .at-duration-presets button { border:1px solid #dce6f6;border-radius:7px;background:#f4f8ff;color:#6f8ebd;font:inherit;font-size:11px;padding:6px 10px;cursor:pointer; } #addTimePanel .add-time-manual-form-fields { display:grid;grid-template-columns:minmax(130px,1.4fr) minmax(60px,1fr) minmax(60px,1fr);gap:12px; } #addTimePanel .add-time-manual-form-fields > button { grid-column:1 / -1;width:100%;min-height:44px;background:#168769;color:#fff;border:0;border-radius:9px; } @media(max-width:800px) { #addTimePanel .at-workbench { grid-template-columns:1fr; } #addTimePanel .add-time-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #addTimePanel .at-manual-example { padding:18px 0; } #addTimePanel .at-page-heading { align-items:start; } } @media(max-width:480px) { #addTimePanel { padding:16px 12px; } #addTimePanel .at-page-heading h1 { font-size:22px; } #addTimePanel .at-page-heading a { font-size:10px;padding:8px; } #addTimePanel .at-status { display:none; } #addTimePanel :is(.at-live-card,.at-manual-card) { padding:20px 16px; } #addTimePanel .add-time-stat-card { padding:13px;gap:9px; } #addTimePanel .add-time-stat-body strong { font-size:17px; } #addTimePanel .add-time-recent-card { padding:16px; } } /* Stronger contrast and type hierarchy for the time workspace. */ #addTimePanel .at-page-heading > div > span { color:#627794;font-size:12px; } #addTimePanel .at-page-heading h1 { font-size:28px;font-weight:700; } #addTimePanel .at-page-heading p { color:#596f8e;font-size:14px; } #addTimePanel .at-page-heading a { color:#355fae;font-size:13px;font-weight:600;background:#eaf1ff;border-color:#b7caef; } #addTimePanel .entity-scope-tabs button { color:#526b8e;font-size:13px;font-weight:500; } #addTimePanel .entity-scope-tabs button.active { background:#dce7ff;color:#315cbb;font-weight:600; } #addTimePanel .at-live-card { background:linear-gradient(145deg,#eaf1ff,#f9fbff 70%);border-color:#b8ccef; } #addTimePanel .at-manual-card { background:linear-gradient(145deg,#eef9f3,#fff 75%);border-color:#bfdece; } #addTimePanel .at-card-heading h2 { color:#2a456b;font-size:17px;font-weight:600; } #addTimePanel .at-card-heading p { color:#607592;font-size:13px; } #addTimePanel .at-method-number { background:#d9e6ff;color:#3d65af;font-size:14px;font-weight:600; } #addTimePanel .at-manual-card .at-method-number { background:#d4eee0;color:#1f795d; } #addTimePanel .at-status { color:#3e6298;background:#e1ebff;border-color:#b7cdef;font-size:12px;font-weight:500; } #addTimePanel #addTimeDisplay { color:#274a83;font-weight:600; } #addTimePanel .at-timer-actions button { font-size:14px;font-weight:600; } #addTimePanel .at-timer-actions .at-primary { background:#3b68ce;border-color:#325dbc; } #addTimePanel .at-timer-actions .add-time-pause-btn { background:#ffedca;color:#8d5d19;border-color:#e4c389; } #addTimePanel .at-timer-actions .add-time-cancel-btn { color:#9f4856;border-color:#e5bdc5;background:#fff3f5; } #addTimePanel .at-timer-footnote { color:#627897;font-size:12px; } #addTimePanel .at-manual-example > span { color:#637e70;font-size:13px; } #addTimePanel .at-manual-example strong { color:#267355;font-size:33px;font-weight:500; } #addTimePanel .at-manual-example small { color:#527d68;font-size:15px; } #addTimePanel .at-manual-button { background:#d8f0e3;color:#176a4d;border-color:#91cbb0;font-size:14px;font-weight:600; } #addTimePanel .add-time-stat-icon { background:#e1eaff;color:#4c73b9; } #addTimePanel .add-time-stat-body small { color:#607594;font-size:13px;font-weight:500; } #addTimePanel .add-time-stat-body strong { color:#304e79;font-size:23px;font-weight:600; } #addTimePanel .add-time-recent-card > h2 { color:#334e75;font-size:17px;font-weight:600; } #addTimePanel .add-time-recent-filter-tabs > button,#addTimePanel .add-time-recent-date-wrap > button { color:#536d92;font-size:13px;font-weight:500; } #addTimePanel .add-time-recent-filter-tabs > button.active { background:#dfe9ff;color:#315db6;border-color:#b6cbf3; } #addTimePanel .add-time-table th { color:#4d668a;background:#edf2fa;font-size:13px;font-weight:600; } #addTimePanel .add-time-table td { color:#405d83;font-size:14px; } #addTimePanel .add-time-empty { color:#617a9c !important; } #addTimePanel :is(.add-time-manual-head,.add-time-controls-head) h2 { color:#304d77;font-size:22px;font-weight:600; } #addTimePanel :is(.add-time-manual-head,.add-time-controls-head) p { color:#627b9b;font-size:14px; } #addTimePanel .at-description-field { color:#4d6689;font-size:14px;font-weight:500; } #addTimePanel .at-description-field > span { color:#7185a0;font-size:12px; } #addTimePanel .at-description-field input { font-size:14px; } #addTimePanel .at-duration-presets > span { color:#61799b;font-size:12px; } #addTimePanel .at-duration-presets button { background:#e7efff;color:#3b64a5;border-color:#bfd0ef;font-size:13px;font-weight:500; } @media(max-width:480px) { #addTimePanel .at-page-heading h1 { font-size:25px; } #addTimePanel .at-card-heading h2 { font-size:16px; } #addTimePanel .add-time-stat-body strong { font-size:21px; } } /* Integrated timer context, goals, and personal reports. */ #addTimePanel .at-context-fields { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px; } #addTimePanel .at-context-fields label { display:flex;flex-direction:column;gap:7px;color:#536f95;font-size:12px; } #addTimePanel .at-context-description { grid-column:1/-1; } #addTimePanel .at-context-fields :is(input,select) { width:100%;min-width:0;border:1px solid #bdcfee;border-radius:8px;padding:10px;background:white;color:#324f79;font:inherit;color-scheme:light; } #addTimePanel .at-context-fields option { background:#fff;color:#324f79; } #addTimePanel .at-focus-option { display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:#5b7295; } #addTimePanel .at-focus-option label { display:flex;align-items:center;gap:7px; } #addTimePanel .at-focus-option input { accent-color:#527bd3; } #addTimePanel .at-alert { margin-top:14px;padding:12px;border:1px solid #e3c38b;border-radius:10px;color:#856126;background:#fff3d9;font-size:12px;line-height:1.9; } #addTimePanel [hidden] { display:none !important; } #addTimePanel .at-alert button { border:1px solid #d7bd8e;border-radius:6px;background:#fff;padding:5px 9px;color:#856126;font:inherit;margin:5px; } #addTimePanel :is(.at-goals,.at-insights) { padding:22px;margin-top:20px;border:1px solid #dce5f2;border-radius:15px;background:white; } #addTimePanel .at-goal-head { display:flex;align-items:center;justify-content:space-between;gap:14px; } #addTimePanel .at-goal-head h2 { font-size:17px;color:#3c577d;margin:0; } #addTimePanel .at-goal-head p { color:#7b8fae;font-size:11px; } #addTimePanel :is(.at-goal-head button,#atPreferencesForm > button,.at-continue-entry) { border:1px solid #bed0ee;background:#eaf1ff;color:#3c65ab;border-radius:8px;padding:8px 12px;font:inherit;font-size:12px;cursor:pointer; } #addTimePanel #atGoalsSummary { display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:18px; } #addTimePanel .at-goal-item { display:grid;grid-template-columns:auto 1fr;gap:10px;color:#6980a1;font-size:12px; } #addTimePanel .at-goal-item strong { text-align:end;font-size:14px;color:#43638f; } #addTimePanel .at-goal-item progress { grid-column:1/-1;width:100%;height:8px;accent-color:#368c71; } #addTimePanel .at-goal-item small { grid-column:1/-1;font-size:11px;color:#7794a0; } #addTimePanel #atPreferencesForm { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px; } #addTimePanel #atPreferencesForm label { display:flex;flex-direction:column;gap:7px;font-size:12px;color:#617da2; } #addTimePanel #atPreferencesForm input { min-width:0;width:100%;border:1px solid #c9d8ee;border-radius:8px;padding:9px;color:#405d86;background:#fff; } #addTimePanel #atPreferencesMessage { font-size:12px;color:#34896b; } #addTimePanel .at-week-chart { display:grid;gap:10px;margin-top:20px; } #addTimePanel .at-week-chart > div { display:grid;grid-template-columns:60px minmax(0,1fr) 155px;align-items:center;gap:12px;color:#6e85a5;font-size:11px; } #addTimePanel .at-week-chart progress { width:100%;height:10px;accent-color:#7395d8; } #addTimePanel .at-week-chart b { font-weight:500;text-align:end; } #addTimePanel .at-report-columns { display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px; } #addTimePanel .at-report-columns h3 { font-size:13px;color:#526e96;margin-bottom:14px; } #addTimePanel .at-report-columns p { color:#879cb7;font-size:12px; } #addTimePanel .at-budget-row { display:grid;grid-template-columns:1fr auto;gap:7px;padding:12px 0;border-bottom:1px solid #edf1f7;font-size:12px;color:#7389a8; } #addTimePanel .at-budget-row strong { font-weight:500;color:#4c6990;overflow-wrap:anywhere; } #addTimePanel .at-budget-row small { grid-column:1/-1;color:#879ab6; } #addTimePanel .at-continue-entry { padding:4px 9px;margin-inline-start:7px;font-size:11px; } @media(max-width:650px) { #addTimePanel #atGoalsSummary,#addTimePanel .at-report-columns { grid-template-columns:1fr; } #addTimePanel #atPreferencesForm { grid-template-columns:1fr 1fr; } #addTimePanel .at-week-chart > div { grid-template-columns:40px minmax(0,1fr) 125px;gap:8px;font-size:10px; } } /* A selectable daily or weekly goal stays visible beside the running timer. */ #addTimePanel .at-goal-track-control { display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,260px);align-items:center;gap:5px 14px;margin-top:17px;padding:13px 15px;border:1px solid #d7e3f5;border-radius:11px;background:#f5f8ff; } #addTimePanel .at-goal-track-control label { display:flex;align-items:center;gap:8px;color:#355985;font-size:13px;font-weight:600; } #addTimePanel .at-goal-track-control label span { color:#4779c7;font-size:18px; } #addTimePanel .at-goal-track-control select { min-height:39px;padding:7px 10px;border:1px solid #c7d7f1;border-radius:8px;background:#fff;color:#355985;font:inherit;font-size:13px; } #addTimePanel .at-goal-track-control small { grid-column:1/-1;color:#6a7f9f;font-size:11px; } #addTimePanel .at-live-goal-tracker { margin-top:10px;padding:12px 15px;border:1px solid #dce9e3;border-radius:10px;background:#f5fbf8; } #addTimePanel .at-live-goal-tracker[hidden] { display:none !important; } #addTimePanel .at-live-goal-copy { display:flex;align-items:center;justify-content:space-between;gap:12px;color:#446c5c;font-size:12px; } #addTimePanel .at-live-goal-copy strong { color:#18795e;font-size:15px;font-variant-numeric:tabular-nums; } #addTimePanel .at-live-goal-track { height:8px;margin:9px 0 6px;overflow:hidden;border-radius:99px;background:#dcebe3; } #addTimePanel .at-live-goal-track span { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#17896a,#4caf86);transition:width .35s ease; } #addTimePanel .at-live-goal-tracker > small { color:#648274;font-size:11px; } #addTimePanel .at-live-goal-tracker.is-unconfigured { border-color:#f0dfb6;background:#fffaf0; } #addTimePanel .at-live-goal-tracker.is-unconfigured .at-live-goal-copy { color:#805f29; } #addTimePanel .at-live-goal-tracker .at-live-goal-copy button { padding:5px 9px;border:1px solid #e5d1a4;border-radius:7px;background:#fff;color:#805f29;font:inherit;font-size:11px;cursor:pointer; } @media(max-width:480px) { #addTimePanel .at-goal-track-control { grid-template-columns:1fr; } #addTimePanel .at-goal-track-control small { grid-column:1; } } /* Manual time entry dialog: clear hierarchy, readable controls, aligned duration row. */ #addTimePanel #addTimeManualModal .project-modal-card.add-time-manual-card--modal { width:min(790px,calc(100vw - 32px)) !important; max-height:min(90dvh,780px) !important; padding:0 !important; overflow-x:hidden !important; overflow-y:auto !important; border:1px solid #d7e1ed !important; border-radius:18px !important; background:#fff !important; box-shadow:0 24px 70px #14263d38 !important; } #addTimePanel #addTimeManualModal .add-time-manual-head { min-height:96px; padding:20px 28px !important; background:linear-gradient(115deg,#172a43,#234c68) !important; } #addTimePanel #addTimeManualModal .add-time-manual-head h2 { color:#fff !important; font-size:22px !important; font-weight:750 !important; } #addTimePanel #addTimeManualModal .add-time-manual-head p { color:#d5e3ef !important; font-size:13px !important; } #addTimePanel #addTimeManualModal .add-time-manual-icon { width:48px; height:48px; border:1px solid #ffffff30; border-radius:13px; background:#ffffff14; box-shadow:none; } #addTimePanel #addTimeManualModal .add-time-manual-form { position:relative; gap:16px !important; padding:19px 26px 24px !important; background:#fff !important; backdrop-filter:none !important; } #addTimePanel #addTimeManualModal .add-time-manual-form-head { min-height:36px; padding:0 54px 10px 0 !important; border-bottom:1px solid #e8edf3 !important; } #addTimePanel #addTimeManualModal .add-time-manual-form-head strong { color:#33465d !important; font-size:14px !important; font-weight:700 !important; } #addTimePanel #addTimeManualModal .add-time-manual-form-head .add-time-manual-close { position:absolute; top:19px; left:24px; width:38px; height:38px; border:1px solid #dce4ed; border-radius:10px; background:#fff; color:#5d7085; box-shadow:none; font-size:22px; } #addTimePanel #addTimeManualModal .add-time-manual-form-section { gap:10px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } #addTimePanel #addTimeManualModal .add-time-manual-form-section::before { content:none !important; display:none !important; } #addTimePanel #addTimeManualModal .add-time-control-label, #addTimePanel #addTimeManualModal .at-description-field, #addTimePanel #addTimeManualModal .add-time-manual-form-fields label > span { color:#354b63 !important; font-size:12px !important; font-weight:650 !important; } #addTimePanel #addTimeManualModal .add-time-manual-form-section--project .add-time-project-picker .project-picker-trigger { min-height:46px !important; padding:0 14px !important; border:1px solid #d6e0eb !important; border-radius:9px !important; background:#fff !important; color:#344c65 !important; box-shadow:none !important; text-align:right; font-size:13px !important; } #addTimePanel #addTimeManualModal .at-description-field { display:grid !important; gap:7px !important; margin:0 !important; color:#354b63 !important; } #addTimePanel #addTimeManualModal .at-description-field > span { margin:0 !important; color:#7b8a9d !important; font-size:11px !important; font-weight:450 !important; } #addTimePanel #addTimeManualModal .at-description-field input, #addTimePanel #addTimeManualModal .add-time-manual-form-fields input { min-height:44px !important; height:44px !important; margin:0 !important; padding:0 12px !important; border:1px solid #d6e0eb !important; border-radius:9px !important; background:#fff !important; color:#253b52 !important; box-shadow:none !important; font-size:13px !important; } #addTimePanel #addTimeManualModal .at-description-field input:focus, #addTimePanel #addTimeManualModal .add-time-manual-form-fields input:focus { border-color:#5488c5 !important; box-shadow:0 0 0 3px #5488c51c !important; } #addTimePanel #addTimeManualModal .at-duration-presets { display:flex !important; align-items:center; gap:8px !important; margin:0 !important; padding:11px 12px; border:1px solid #e2e9f1; border-radius:10px; background:#f7f9fc; } #addTimePanel #addTimeManualModal .at-duration-presets > span { margin-inline-end:auto !important; color:#455b74 !important; font-size:12px !important; font-weight:650 !important; } #addTimePanel #addTimeManualModal .at-duration-presets button { min-width:76px; min-height:36px; padding:5px 11px !important; border:1px solid #c9d9ea !important; border-radius:8px !important; background:#eaf2fb !important; color:#315b84 !important; box-shadow:none !important; font-size:12px !important; font-weight:650 !important; } #addTimePanel #addTimeManualModal .at-duration-presets button:hover, #addTimePanel #addTimeManualModal .at-duration-presets button.is-selected { border-color:#21846b !important; background:#188369 !important; color:#fff !important; } #addTimePanel #addTimeManualModal .add-time-manual-form-fields { grid-template-columns:minmax(170px,1.35fr) minmax(125px,1fr) 78px 78px minmax(125px,1fr) !important; align-items:end !important; gap:10px !important; } #addTimePanel #addTimeManualModal .add-time-manual-form-fields > label { display:grid !important; gap:7px !important; min-width:0; } #addTimePanel #addTimeManualModal .add-time-manual-form-fields > label > span { display:block; color:#354b63 !important; font-size:12px !important; } #addTimePanel #addTimeManualModal .add-time-manual-form-fields > label > span small { margin-inline-start:5px; color:#8b98a8; font-size:10px; font-weight:400; } #addTimePanel #addTimeManualModal .add-time-manual-form-fields .task-date-field-jalali input { width:100%; } #addTimePanel #addTimeManualModal .add-time-manual-form-fields > button[type="submit"] { grid-column:auto !important; width:100% !important; min-height:44px !important; height:44px !important; padding:0 13px !important; border:0 !important; border-radius:9px !important; background:#168369 !important; color:#fff !important; box-shadow:none !important; font-size:13px !important; font-weight:700 !important; } #addTimePanel #addTimeManualModal .add-time-manual-form-fields > button[type="submit"]:hover { background:#116e58 !important; transform:translateY(-1px); } #addTimePanel #addTimeManualModal .add-time-manual-form-fields > button[type="submit"] svg { width:17px; height:17px; } #addTimePanel #addTimeManualModal .add-time-manual-form-fields input[type="text"] { text-align:center; font-variant-numeric:tabular-nums; } #addTimePanel #addTimeManualModal .add-time-manual-form-fields input[type="time"] { direction:ltr; } #addTimePanel #addTimeManualModal .task-jalali-picker { z-index:100002; } @media(max-width:680px) { #addTimePanel #addTimeManualModal .project-modal-card.add-time-manual-card--modal { width:min(calc(100vw - 20px),520px) !important; max-height:calc(100dvh - 20px) !important; border-radius:15px !important; } #addTimePanel #addTimeManualModal .add-time-manual-head { min-height:82px; padding:15px 18px !important; } #addTimePanel #addTimeManualModal .add-time-manual-head h2 { font-size:19px !important; } #addTimePanel #addTimeManualModal .add-time-manual-head p { font-size:11px !important; } #addTimePanel #addTimeManualModal .add-time-manual-form { padding:15px 16px 18px !important; } #addTimePanel #addTimeManualModal .add-time-manual-form-head .add-time-manual-close { top:14px; left:15px; } #addTimePanel #addTimeManualModal .at-duration-presets { flex-wrap:wrap; } #addTimePanel #addTimeManualModal .at-duration-presets > span { flex-basis:100%; } #addTimePanel #addTimeManualModal .at-duration-presets button { flex:1 1 70px; } #addTimePanel #addTimeManualModal .add-time-manual-form-fields { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } #addTimePanel #addTimeManualModal .add-time-manual-form-fields .add-time-jalali-field, #addTimePanel #addTimeManualModal .add-time-manual-form-fields > button[type="submit"] { grid-column:1/-1 !important; } } /* Manual time entry v2: a purpose-built form with distinct project, date and duration steps. */ #addTimePanel #addTimeManualModal .project-modal-card.add-time-manual-card--modal { display:block !important; width:min(720px,calc(100vw - 28px)) !important; max-height:min(90dvh,760px) !important; padding:0 !important; overflow:auto !important; border:1px solid #dbe4ee !important; border-radius:20px !important; background:#fff !important; box-shadow:0 30px 90px #172b4538 !important; } #addTimePanel #addTimeManualModal .add-time-manual-head { min-height:106px; padding:22px 28px !important; background:linear-gradient(115deg,#17324a,#1c6570) !important; } #addTimePanel #addTimeManualModal .add-time-manual-head h2 { color:#fff !important; font-size:22px !important; font-weight:750 !important; } #addTimePanel #addTimeManualModal .add-time-manual-head p { color:#d8e9e9 !important; font-size:13px !important; } #addTimePanel #addTimeManualModal .add-time-manual-icon { width:48px; height:48px; border:1px solid #ffffff38; border-radius:14px; background:#ffffff18; box-shadow:none; } #addTimePanel #addTimeManualModal .add-time-manual-form.at-manual-v2 { display:grid !important; gap:18px !important; padding:22px 28px 26px !important; background:#fff !important; backdrop-filter:none !important; } #addTimePanel #addTimeManualModal .at-manual-v2-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:15px; border-bottom:1px solid #e8edf2; } #addTimePanel #addTimeManualModal .at-manual-v2-topline > div { display:grid; gap:4px; } #addTimePanel #addTimeManualModal .at-manual-v2-topline > div span { color:#8290a1; font-size:11px; } #addTimePanel #addTimeManualModal .at-manual-v2-topline > div strong { color:#2b4057; font-size:15px; font-weight:700; } #addTimePanel #addTimeManualModal .at-manual-v2-topline .add-time-manual-close { position:static !important; flex:0 0 38px; width:38px; height:38px; border:1px solid #dfe6ee !important; border-radius:10px !important; background:#f8fafc !important; color:#61738a !important; box-shadow:none !important; } #addTimePanel #addTimeManualModal .at-manual-v2-project { display:grid; gap:8px; } #addTimePanel #addTimeManualModal .at-manual-v2-label { display:flex; align-items:center; justify-content:space-between; gap:12px; } #addTimePanel #addTimeManualModal .at-manual-v2-label > span, #addTimePanel #addTimeManualModal .at-manual-v2-field > span, #addTimePanel #addTimeManualModal .at-manual-v2-datetime label > span, #addTimePanel #addTimeManualModal .at-manual-v2-duration-fields label > span { color:#354b61; font-size:12px; font-weight:650; } #addTimePanel #addTimeManualModal .at-manual-v2-label > b { padding:3px 8px; border-radius:99px; background:#fff3e9; color:#a76529; font-size:10px; font-weight:600; } #addTimePanel #addTimeManualModal .at-manual-v2-project .project-picker-trigger { width:100%; min-height:48px !important; padding:0 14px !important; border:1px solid #d5e0eb !important; border-radius:10px !important; background:#fff !important; color:#344b63 !important; box-shadow:none !important; text-align:right; font-size:13px !important; font-weight:550; } #addTimePanel #addTimeManualModal .at-manual-v2-project .project-picker-trigger:hover { border-color:#9bb8ca !important; transform:none !important; } #addTimePanel #addTimeManualModal .at-manual-v2-project .project-picker-menu { z-index:100004; max-height:280px; } #addTimePanel #addTimeManualModal .at-manual-v2-field { display:grid; gap:8px; color:#354b61; font-size:12px; font-weight:650; } #addTimePanel #addTimeManualModal .at-manual-v2-field > span small, #addTimePanel #addTimeManualModal .at-manual-v2-datetime label > span small { margin-inline-start:6px; color:#8997a7; font-size:10px; font-weight:400; } #addTimePanel #addTimeManualModal .at-manual-v2 :is(input[type="text"],input[type="time"]) { min-width:0; width:100%; height:45px !important; min-height:45px !important; margin:0 !important; padding:0 12px !important; border:1px solid #d8e1eb !important; border-radius:9px !important; background:#fff !important; color:#263c53 !important; box-shadow:none !important; font:inherit; font-size:13px !important; } #addTimePanel #addTimeManualModal .at-manual-v2 input:focus { border-color:#548c9a !important; box-shadow:0 0 0 3px #40899b1c !important; outline:0; } #addTimePanel #addTimeManualModal .at-manual-v2-datetime { display:grid; grid-template-columns:1fr 1fr; gap:12px; } #addTimePanel #addTimeManualModal .at-manual-v2-datetime label { display:grid; gap:8px; min-width:0; } #addTimePanel #addTimeManualModal .at-manual-v2-datetime input[type="time"] { direction:ltr; } #addTimePanel #addTimeManualModal .at-manual-v2-duration { display:grid; gap:12px; padding:15px; border:1px solid #e0e8ef; border-radius:12px; background:#f7f9fb; } #addTimePanel #addTimeManualModal .at-manual-v2-label > small { color:#7c8b9b; font-size:10px; font-weight:400; } #addTimePanel #addTimeManualModal .at-manual-v2-presets { display:flex; flex-wrap:wrap; gap:7px; } #addTimePanel #addTimeManualModal .at-manual-v2-presets button { min-height:34px; padding:0 12px !important; border:1px solid #d4e0e9 !important; border-radius:8px !important; background:#fff !important; color:#47627b !important; box-shadow:none !important; font:inherit; font-size:11px !important; font-weight:600; cursor:pointer; transition:background .16s,border-color .16s,color .16s; } #addTimePanel #addTimeManualModal .at-manual-v2-presets button:hover { border-color:#8eb8b0 !important; background:#edf7f3 !important; color:#176b58 !important; } #addTimePanel #addTimeManualModal .at-manual-v2-presets button.is-selected { border-color:#168369 !important; background:#168369 !important; color:#fff !important; } #addTimePanel #addTimeManualModal .at-manual-v2-duration-fields { display:flex; align-items:end; gap:9px; width:max-content; max-width:100%; } #addTimePanel #addTimeManualModal .at-manual-v2-duration-fields label { display:grid; gap:6px; width:94px; } #addTimePanel #addTimeManualModal .at-manual-v2-duration-fields label input { text-align:center; font-size:17px !important; font-weight:650; font-variant-numeric:tabular-nums; } #addTimePanel #addTimeManualModal .at-manual-v2-duration-fields > i { padding-bottom:12px; color:#8a9aab; font-style:normal; } #addTimePanel #addTimeManualModal .at-manual-v2-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:15px; border-top:1px solid #e8edf2; } #addTimePanel #addTimeManualModal .at-manual-v2-footer > span { color:#76879a; font-size:10px; line-height:1.8; } #addTimePanel #addTimeManualModal .at-manual-v2-footer button[type="submit"] { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:150px; min-height:44px; padding:0 16px !important; border:0 !important; border-radius:9px !important; background:#168369 !important; color:#fff !important; box-shadow:0 5px 12px #16836924 !important; font:inherit; font-size:13px !important; font-weight:700; cursor:pointer; } #addTimePanel #addTimeManualModal .at-manual-v2-footer button[type="submit"]:hover { background:#116e58 !important; transform:translateY(-1px); } #addTimePanel #addTimeManualModal .at-manual-v2-footer button[type="submit"] svg { width:17px; height:17px; } #addTimePanel #addTimeManualModal .task-jalali-picker { z-index:100005; } @media(max-width:600px) { #addTimePanel #addTimeManualModal .project-modal-card.add-time-manual-card--modal { width:calc(100vw - 20px) !important; max-height:calc(100dvh - 20px) !important; border-radius:16px !important; } #addTimePanel #addTimeManualModal .add-time-manual-head { min-height:86px; padding:16px 18px !important; } #addTimePanel #addTimeManualModal .add-time-manual-head h2 { font-size:19px !important; } #addTimePanel #addTimeManualModal .add-time-manual-head p { font-size:11px !important; } #addTimePanel #addTimeManualModal .add-time-manual-form.at-manual-v2 { gap:15px !important; padding:16px !important; } #addTimePanel #addTimeManualModal .at-manual-v2-datetime { grid-template-columns:1fr; } #addTimePanel #addTimeManualModal .at-manual-v2-label { align-items:flex-start; flex-direction:column; gap:5px; } #addTimePanel #addTimeManualModal .at-manual-v2-duration { padding:12px; } #addTimePanel #addTimeManualModal .at-manual-v2-footer { align-items:stretch; flex-direction:column-reverse; } #addTimePanel #addTimeManualModal .at-manual-v2-footer button[type="submit"] { width:100%; } } /* The modal is portaled to body, so style it by its own id rather than its former page parent. */ #addTimeManualModal .project-modal-card.add-time-manual-card--modal { display:block !important; width:min(720px,calc(100vw - 28px)) !important; max-height:min(90dvh,760px) !important; padding:0 !important; overflow:auto !important; border:1px solid #dbe4ee !important; border-radius:20px !important; background:#fff !important; box-shadow:0 30px 90px #172b4538 !important; } #addTimeManualModal .add-time-manual-head { min-height:106px !important; padding:22px 28px !important; background:linear-gradient(115deg,#17324a,#1c6570) !important; } #addTimeManualModal .add-time-manual-head h2 { color:#fff !important; font-size:22px !important; font-weight:750 !important; } #addTimeManualModal .add-time-manual-head p { color:#d8e9e9 !important; font-size:13px !important; } #addTimeManualModal .add-time-manual-icon { width:48px !important; height:48px !important; border:1px solid #ffffff38 !important; border-radius:14px !important; background:#ffffff18 !important; box-shadow:none !important; } #addTimeManualModal .add-time-manual-form.at-manual-v2 { display:grid !important; gap:18px !important; padding:22px 28px 26px !important; background:#fff !important; backdrop-filter:none !important; } #addTimeManualModal .at-manual-v2-topline { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; padding-bottom:15px !important; border-bottom:1px solid #e8edf2 !important; } #addTimeManualModal .at-manual-v2-topline > div { display:grid !important; gap:4px !important; } #addTimeManualModal .at-manual-v2-topline > div span { color:#687b90 !important; font-size:12px !important; } #addTimeManualModal .at-manual-v2-topline > div strong { color:#263d55 !important; font-size:16px !important; font-weight:700 !important; } #addTimeManualModal .at-manual-v2-topline .add-time-manual-close { position:static !important; flex:0 0 40px !important; width:40px !important; height:40px !important; border:1px solid #d4dee8 !important; border-radius:10px !important; background:#f5f8fb !important; color:#40576f !important; box-shadow:none !important; font-size:22px !important; } #addTimeManualModal .at-manual-v2-project { display:grid !important; gap:9px !important; } #addTimeManualModal .at-manual-v2-label { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; } #addTimeManualModal .at-manual-v2-label > span, #addTimeManualModal .at-manual-v2-field > span, #addTimeManualModal .at-manual-v2-datetime label > span, #addTimeManualModal .at-manual-v2-duration-fields label > span { color:#263f58 !important; font-size:13px !important; font-weight:700 !important; } #addTimeManualModal .at-manual-v2-label > b { padding:4px 9px !important; border-radius:99px !important; background:#fff0e2 !important; color:#914e13 !important; font-size:11px !important; font-weight:650 !important; } #addTimeManualModal .at-manual-v2-project .project-picker-trigger { width:100% !important; min-height:50px !important; padding:0 14px !important; border:1px solid #cbd8e5 !important; border-radius:10px !important; background:#fff !important; color:#253e58 !important; box-shadow:none !important; text-align:right !important; font-size:14px !important; font-weight:600 !important; } #addTimeManualModal .at-manual-v2-project .project-picker-menu { z-index:100004 !important; max-height:280px !important; } #addTimeManualModal .at-manual-v2-field { display:grid !important; gap:8px !important; color:#263f58 !important; font-size:13px !important; font-weight:700 !important; } #addTimeManualModal .at-manual-v2-field > span small, #addTimeManualModal .at-manual-v2-datetime label > span small { margin-inline-start:6px !important; color:#718198 !important; font-size:11px !important; font-weight:450 !important; } #addTimeManualModal .at-manual-v2 :is(input[type="text"],input[type="time"]) { display:block !important; min-width:0 !important; width:100% !important; height:48px !important; min-height:48px !important; margin:0 !important; padding:0 13px !important; border:1px solid #cbd8e5 !important; border-radius:9px !important; background:#fff !important; color:#1e344a !important; box-shadow:none !important; font-family:inherit !important; font-size:14px !important; opacity:1 !important; } #addTimeManualModal .at-manual-v2 :is(input[type="text"],input[type="time"])::placeholder { color:#718198 !important; opacity:1 !important; } #addTimeManualModal .at-manual-v2 input:focus { border-color:#397a8a !important; box-shadow:0 0 0 3px #397a8a20 !important; outline:0 !important; } #addTimeManualModal .at-manual-v2-datetime { display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px !important; } #addTimeManualModal .at-manual-v2-datetime label { display:grid !important; gap:8px !important; min-width:0 !important; } #addTimeManualModal .at-manual-v2-datetime input[type="time"] { direction:ltr !important; } #addTimeManualModal .at-manual-v2-duration { display:grid !important; gap:13px !important; padding:16px !important; border:1px solid #d7e1ea !important; border-radius:12px !important; background:#f5f8fb !important; } #addTimeManualModal .at-manual-v2-label > small { color:#536a82 !important; font-size:11px !important; font-weight:500 !important; } #addTimeManualModal .at-manual-v2-presets { display:flex !important; flex-wrap:wrap !important; gap:8px !important; } #addTimeManualModal .at-manual-v2-presets button { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:82px !important; min-height:38px !important; height:38px !important; padding:0 13px !important; border:1px solid #b9ccdc !important; border-radius:8px !important; background:#e7f0f7 !important; color:#244864 !important; box-shadow:none !important; font-family:inherit !important; font-size:13px !important; font-weight:700 !important; opacity:1 !important; cursor:pointer !important; } #addTimeManualModal .at-manual-v2-presets button:hover { border-color:#548d83 !important; background:#dcefe8 !important; color:#145c4b !important; } #addTimeManualModal .at-manual-v2-presets button.is-selected { border-color:#116c58 !important; background:#14765f !important; color:#fff !important; } #addTimeManualModal .at-manual-v2-duration-fields { display:flex !important; align-items:end !important; gap:10px !important; width:max-content !important; max-width:100% !important; } #addTimeManualModal .at-manual-v2-duration-fields label { display:grid !important; gap:6px !important; width:100px !important; } #addTimeManualModal .at-manual-v2-duration-fields label input { text-align:center !important; font-size:17px !important; font-weight:700 !important; font-variant-numeric:tabular-nums !important; } #addTimeManualModal .at-manual-v2-duration-fields > i { padding-bottom:13px !important; color:#536a82 !important; font-size:18px !important; font-style:normal !important; } #addTimeManualModal .at-manual-v2-footer { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; padding-top:16px !important; border-top:1px solid #e1e8ef !important; } #addTimeManualModal .at-manual-v2-footer > span { color:#53677d !important; font-size:11px !important; line-height:1.9 !important; } #addTimeManualModal .at-manual-v2-footer button[type="submit"] { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; width:auto !important; min-width:160px !important; min-height:48px !important; height:48px !important; padding:0 18px !important; border:0 !important; border-radius:9px !important; background:#14765f !important; color:#fff !important; box-shadow:0 5px 12px #14765f24 !important; font-family:inherit !important; font-size:14px !important; font-weight:750 !important; opacity:1 !important; cursor:pointer !important; } #addTimeManualModal .at-manual-v2-footer button[type="submit"]:hover { background:#105f4c !important; transform:translateY(-1px) !important; } #addTimeManualModal .at-manual-v2-footer button[type="submit"] svg { width:17px !important; height:17px !important; } #addTimeManualModal .task-jalali-picker { z-index:100005 !important; } @media(max-width:600px) { #addTimeManualModal .project-modal-card.add-time-manual-card--modal { width:calc(100vw - 20px) !important; max-height:calc(100dvh - 20px) !important; border-radius:16px !important; } #addTimeManualModal .add-time-manual-head { min-height:86px !important; padding:16px 18px !important; } #addTimeManualModal .add-time-manual-head h2 { font-size:19px !important; } #addTimeManualModal .add-time-manual-head p { font-size:12px !important; } #addTimeManualModal .add-time-manual-form.at-manual-v2 { gap:15px !important; padding:16px !important; } #addTimeManualModal .at-manual-v2-datetime { grid-template-columns:1fr !important; } #addTimeManualModal .at-manual-v2-label { align-items:flex-start !important; flex-direction:column !important; gap:5px !important; } #addTimeManualModal .at-manual-v2-duration { padding:12px !important; } #addTimeManualModal .at-manual-v2-footer { align-items:stretch !important; flex-direction:column-reverse !important; } #addTimeManualModal .at-manual-v2-footer button[type="submit"] { width:100% !important; } } /* Mobile uses document scrolling instead of a shrinking nested flex viewport. */ @media (max-width:800px) { body:has(#addTimePanel.active) { height:auto;min-height:100vh;min-height:100dvh;overflow-y:auto; } body:has(#addTimePanel.active) #dashboardApp, body:has(#addTimePanel.active) .app-layout { height:auto;min-height:100vh;min-height:100dvh;max-height:none;overflow:visible; } body:has(#addTimePanel.active) .content { height:auto;min-height:100vh;min-height:100dvh;max-height:none;overflow:visible; } #addTimePanel.page-panel.active { flex:1 0 auto;height:auto;min-height:calc(100vh - 90px);min-height:calc(100dvh - 90px);max-height:none;overflow:visible;padding-bottom:calc(28px + env(safe-area-inset-bottom)); } } /* Match the manual time form to the project's compact blue visual system. */ #addTimeManualModal .project-modal-card.add-time-manual-card--modal { width:min(700px,calc(100vw - 28px)) !important; border-color:#dfe6ef !important; border-radius:8px !important; box-shadow:0 22px 60px rgba(23,32,51,.2) !important; } #addTimeManualModal .add-time-manual-head { min-height:86px !important; padding:17px 24px !important; border-bottom:1px solid #e7edf5; background:#fff !important; } #addTimeManualModal .add-time-manual-head h2 { color:#172033 !important; font-size:20px !important; font-weight:800 !important; } #addTimeManualModal .add-time-manual-head p { color:#6b7788 !important; font-size:12px !important; } #addTimeManualModal .add-time-manual-icon { width:42px !important; height:42px !important; border:1px solid #dbe7ff !important; border-radius:8px !important; background:#eff6ff !important; color:#2563eb !important; } #addTimeManualModal .add-time-manual-icon svg { width:21px !important; height:21px !important; } #addTimeManualModal .add-time-manual-form.at-manual-v2 { gap:15px !important; padding:18px 24px 22px !important; } #addTimeManualModal .at-manual-v2-topline { padding-bottom:12px !important; border-bottom-color:#e7edf5 !important; } #addTimeManualModal .at-manual-v2-topline > div span { color:#6b7788 !important; font-size:10px !important; } #addTimeManualModal .at-manual-v2-topline > div strong { color:#172033 !important; font-size:14px !important; } #addTimeManualModal .at-manual-v2-topline .add-time-manual-close { flex-basis:34px !important; width:34px !important; height:34px !important; border-color:#dfe6ef !important; border-radius:6px !important; background:#f8fafc !important; color:#536273 !important; } #addTimeManualModal .at-manual-v2-label > span, #addTimeManualModal .at-manual-v2-field > span, #addTimeManualModal .at-manual-v2-datetime label > span, #addTimeManualModal .at-manual-v2-duration-fields label > span { color:#27364d !important; font-size:12px !important; font-weight:750 !important; } #addTimeManualModal .at-manual-v2-label > b { border-radius:5px !important; background:#eff6ff !important; color:#2563eb !important; } #addTimeManualModal .at-manual-v2-project .project-picker-trigger, #addTimeManualModal .at-manual-v2 :is(input[type="text"],input[type="time"]) { min-height:44px !important; height:44px !important; border-color:#d5deea !important; border-radius:6px !important; background:#fff !important; color:#172033 !important; font-size:12px !important; } #addTimeManualModal .at-manual-v2 :is(input[type="text"],input[type="time"])::placeholder { color:#8491a3 !important; } #addTimeManualModal .at-manual-v2 :is(input[type="text"],input[type="time"]):focus, #addTimeManualModal .at-manual-v2-project .project-picker-trigger:focus-visible { border-color:#2563eb !important; box-shadow:0 0 0 3px rgba(37,99,235,.12) !important; } #addTimeManualModal .at-manual-v2-duration { gap:12px !important; padding:14px !important; border-color:#dfe6ef !important; border-radius:7px !important; background:#f8fafc !important; } #addTimeManualModal .at-manual-v2-label > small { color:#6b7788 !important; } #addTimeManualModal .at-manual-v2-presets { gap:6px !important; } #addTimeManualModal .at-manual-v2-presets button { min-height:34px !important; height:34px !important; padding-inline:11px !important; border-color:#d5deea !important; border-radius:6px !important; background:#fff !important; color:#34445b !important; font-size:11px !important; } #addTimeManualModal .at-manual-v2-presets button:hover { border-color:#9db8ee !important; background:#f5f8ff !important; color:#1d4ed8 !important; } #addTimeManualModal .at-manual-v2-presets button.is-selected { border-color:#2563eb !important; background:#2563eb !important; color:#fff !important; } #addTimeManualModal .at-manual-v2-duration-fields label { width:88px !important; } #addTimeManualModal .at-manual-v2-duration-fields label input { font-size:15px !important; } #addTimeManualModal .at-manual-v2-duration-fields > i { color:#6b7788 !important; } #addTimeManualModal .at-manual-v2-footer { padding-top:13px !important; border-top-color:#e7edf5 !important; } #addTimeManualModal .at-manual-v2-footer > span { color:#6b7788 !important; font-size:10px !important; } #addTimeManualModal .at-manual-v2-footer button[type="submit"] { min-width:140px !important; min-height:42px !important; height:42px !important; border-radius:6px !important; background:#2563eb !important; box-shadow:0 4px 10px rgba(37,99,235,.18) !important; font-size:12px !important; } #addTimeManualModal .at-manual-v2-footer button[type="submit"]:hover { background:#1d4ed8 !important; } #addTimeManualModal .task-jalali-picker { border-color:#d5deea !important; border-radius:7px !important; box-shadow:0 12px 30px rgba(23,32,51,.14) !important; } @media(max-width:600px) { #addTimeManualModal .project-modal-card.add-time-manual-card--modal { border-radius:8px !important; } #addTimeManualModal .add-time-manual-head { min-height:76px !important; padding:13px 15px !important; } #addTimeManualModal .add-time-manual-head h2 { font-size:18px !important; } #addTimeManualModal .add-time-manual-form.at-manual-v2 { gap:13px !important; padding:14px !important; } #addTimeManualModal .at-manual-v2-duration-fields label { width:min(88px,32vw) !important; } } /* Keep the manual-entry project list compact and calm. */ #addTimeManualModal [data-project-picker-menu="addTimeManualProjectSelect"] { padding:5px !important; border:1px solid #dfe6ef !important; border-radius:8px !important; background:#fff !important; box-shadow:0 10px 24px rgba(23,32,51,.12) !important; } #addTimeManualModal .add-time-manual-project-search-wrap { position:sticky; top:0; z-index:1; padding:2px 2px 6px; background:#fff; } #addTimeManualModal .add-time-manual-project-search { width:100%; height:36px; padding:0 10px; border:1px solid #dfe6ef; border-radius:6px; background:#f8fafc; color:#34445b; font:inherit; font-size:12px; outline:none; } #addTimeManualModal .add-time-manual-project-search:focus { border-color:#8bb4ff; background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.09); } #addTimeManualModal .add-time-manual-project-search::placeholder { color:#8794a5; } #addTimeManualModal .add-time-manual-project-no-results { padding:12px 8px; color:#718096; font-size:12px; text-align:center; } #addTimeManualModal [data-project-picker-option="addTimeManualProjectSelect"] { display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; min-height:38px !important; margin:2px 0 !important; padding:8px 10px !important; border:1px solid transparent !important; border-radius:6px !important; background:transparent !important; box-shadow:none !important; color:#34445b !important; font-size:12px !important; font-weight:400 !important; text-align:right !important; transition:background-color .15s ease,border-color .15s ease,color .15s ease !important; } #addTimeManualModal [data-project-picker-option="addTimeManualProjectSelect"] strong, #addTimeManualModal [data-project-picker-option="addTimeManualProjectSelect"] span { color:inherit !important; font-size:12px !important; font-weight:500 !important; } #addTimeManualModal [data-project-picker-option="addTimeManualProjectSelect"] span { color:#2563eb !important; font-size:10px !important; } #addTimeManualModal [data-project-picker-option="addTimeManualProjectSelect"]:hover { border-color:#dbe7ff !important; background:#f3f7ff !important; color:#1d4ed8 !important; } #addTimeManualModal [data-project-picker-option="addTimeManualProjectSelect"].is-selected { border-color:#cfe0ff !important; background:#eff6ff !important; color:#1d4ed8 !important; } #addTimeManualModal #addTimeEntryJalaliPicker { margin:0 !important; padding:12px !important; width:320px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; transform:none !important; border:1px solid #dfe6ef !important; border-radius:10px !important; background:#fff !important; box-shadow:0 8px 22px rgba(23,32,51,.08) !important; } #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-head { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; margin:0 0 12px !important; padding:0 !important; } #addTimeManualModal .add-time-date-month-selects { display:flex; align-items:center; gap:6px; min-width:0; } #addTimeManualModal .add-time-date-month-selects select { width:auto !important; min-width:0 !important; max-width:none !important; height:34px !important; padding:0 8px !important; border:1px solid #dfe6ef !important; border-radius:6px !important; background:#f8fafc !important; color:#26364d !important; font-family:inherit !important; font-size:12px !important; font-weight:500 !important; } #addTimeManualModal .add-time-date-month-selects #addTimeEntryJalaliMonthSelect { min-width:108px !important; } #addTimeManualModal .add-time-date-month-selects #addTimeEntryJalaliYearSelect { min-width:72px !important; } #addTimeManualModal #addTimeEntryJalaliPicker .add-time-date-nav { display:grid !important; place-items:center !important; flex:0 0 34px !important; width:34px !important; height:34px !important; padding:0 !important; border:1px solid #dfe6ef !important; border-radius:6px !important; background:#fff !important; color:#40536c !important; font-size:20px !important; font-weight:400 !important; } #addTimeManualModal #addTimeEntryJalaliPicker .add-time-date-nav:hover { border-color:#b8cdf6 !important; background:#f3f7ff !important; color:#1d4ed8 !important; } #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-weekdays, #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-days { gap:4px !important; } #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-weekdays { margin-bottom:5px; } #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-weekdays span { color:#718096 !important; font-size:10px !important; font-weight:500 !important; } #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-days { padding:0 !important; } #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-days button { height:34px !important; border:1px solid transparent !important; border-radius:6px !important; background:#fff !important; color:#34445b !important; font-size:12px !important; font-weight:400 !important; box-shadow:none !important; transition:background-color .14s ease,border-color .14s ease,color .14s ease !important; } #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-days button:not(.is-empty):hover { border-color:#dbe7ff !important; background:#f3f7ff !important; color:#1d4ed8 !important; transform:none !important; } #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-days button.active, #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-days button.active:hover { border-color:#1467fe !important; background:#1467fe !important; color:#fff !important; font-weight:600 !important; box-shadow:none !important; } #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-days button.is-empty { background:transparent !important; } #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-time { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; margin-top:12px !important; padding:10px 0 0 !important; border-top:1px solid #edf0f4; } #addTimeManualModal .add-time-date-shortcuts, #addTimeManualModal .add-time-date-actions { display:flex; align-items:center; gap:6px; } #addTimeManualModal .add-time-date-shortcuts button, #addTimeManualModal .add-time-date-actions button { min-height:32px !important; padding:0 10px !important; border:1px solid #dfe6ef !important; border-radius:6px !important; background:#fff !important; color:#536273 !important; font-family:inherit !important; font-size:11px !important; font-weight:500 !important; box-shadow:none !important; } #addTimeManualModal .add-time-date-shortcuts button:hover, #addTimeManualModal .add-time-date-actions .add-time-date-clear:hover { border-color:#b8cdf6 !important; background:#f3f7ff !important; color:#1d4ed8 !important; } #addTimeManualModal .add-time-date-actions .add-time-date-apply { border-color:#1467fe !important; background:#1467fe !important; color:#fff !important; } #addTimeManualModal .add-time-date-actions .add-time-date-apply:hover { border-color:#0e58e8 !important; background:#0e58e8 !important; } @media(max-width:600px) { #addTimeManualModal #addTimeEntryJalaliPicker { width:300px; padding:10px !important; } #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-days button { height:32px !important; } #addTimeManualModal #addTimeEntryJalaliPicker .task-jalali-time { align-items:stretch !important; flex-direction:column !important; } #addTimeManualModal .add-time-date-shortcuts, #addTimeManualModal .add-time-date-actions { justify-content:space-between; } } /* Refined timer-stop dialog controls. */ #addTimeControlsModal .add-time-controls-card--modal { width:min(620px,calc(100vw - 28px)) !important; max-height:calc(100dvh - 28px) !important; overflow-y:auto !important; padding:24px !important; border:1px solid #e1e7ef !important; border-radius:12px !important; background:#fff !important; box-shadow:0 20px 56px rgba(22,38,60,.18) !important; } #addTimeControlsModal .add-time-controls-head--modal { align-items:center !important; gap:16px !important; padding:0 0 18px !important; border-bottom:1px solid #edf0f4; } #addTimeControlsModal .add-time-controls-head--modal h2 { margin:0 !important; color:#1f2e43 !important; font-size:18px !important; font-weight:650 !important; } #addTimeControlsModal .add-time-controls-head--modal p { margin:5px 0 0 !important; color:#718096 !important; font-size:12px !important; line-height:1.8 !important; } #addTimeControlsModal .add-time-controls-head--modal .add-time-manual-close { display:grid !important; place-items:center !important; width:36px !important; height:36px !important; margin:0 !important; border:1px solid #e1e7ef !important; border-radius:7px !important; background:#f8fafc !important; color:#63748a !important; font-size:21px !important; box-shadow:none !important; } #addTimeControlsModal .add-time-controls-head--modal .add-time-manual-close:hover { border-color:#c8d8f4 !important; background:#f1f6ff !important; color:#2563eb !important; } #addTimeControlsModal .add-time-controls { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px 16px !important; margin-top:18px !important; } #addTimeControlsModal .add-time-control-item { gap:7px !important; transform:none !important; } #addTimeControlsModal .add-time-control-item--full { margin:0 !important; padding:0 0 14px !important; border-bottom:1px solid #edf0f4 !important; } #addTimeControlsModal .add-time-control-label { color:#3c4d63 !important; font-size:12px !important; font-weight:550 !important; } #addTimeControlsModal .add-time-field-icon { inset-inline-start:12px !important; width:16px !important; height:16px !important; color:#8291a4 !important; } #addTimeControlsModal .add-time-controls input, #addTimeControlsModal .add-time-controls select, #addTimeControlsModal .add-time-project-picker .project-picker-trigger { height:44px !important; min-height:44px !important; border:1px solid #d8e0e9 !important; border-radius:7px !important; background-color:#fff !important; color:#27384e !important; font-family:inherit !important; font-size:13px !important; font-weight:450 !important; box-shadow:none !important; transition:border-color .15s ease,box-shadow .15s ease !important; } #addTimeControlsModal .add-time-controls input { padding-inline:40px 12px !important; } #addTimeControlsModal .add-time-controls select { padding-inline:40px 12px !important; } #addTimeControlsModal .add-time-controls input::placeholder { color:#9aa6b5 !important; } #addTimeControlsModal .add-time-controls :is(input,select):hover, #addTimeControlsModal .add-time-project-picker .project-picker-trigger:hover { border-color:#b9c8dc !important; background-color:#fff !important; transform:none !important; } #addTimeControlsModal .add-time-controls :is(input,select):focus, #addTimeControlsModal .add-time-project-picker .project-picker-trigger:focus-visible { border-color:#7ca8ff !important; box-shadow:0 0 0 3px rgba(20,103,254,.1) !important; outline:0 !important; } #addTimeControlsModal .add-time-project-picker .project-picker-trigger { padding:0 40px 0 12px !important; text-align:right !important; } #addTimeControlsModal .add-time-controls-actions { justify-content:flex-start !important; margin-top:18px !important; } #addTimeControlsModal .add-time-controls-actions .add-time-save-btn { min-width:142px !important; min-height:42px !important; padding:0 18px !important; border:1px solid #1467fe !important; border-radius:7px !important; background:#1467fe !important; color:#fff !important; font-family:inherit !important; font-size:13px !important; font-weight:550 !important; box-shadow:0 4px 10px rgba(20,103,254,.16) !important; } #addTimeControlsModal .add-time-controls-actions .add-time-save-btn:hover { border-color:#0c57e8 !important; background:#0c57e8 !important; } #addTimeControlsModal .add-time-controls-message { margin-top:12px !important; } @media(max-width:600px) { #addTimeControlsModal .add-time-controls-card--modal { width:calc(100vw - 20px) !important; padding:18px !important; border-radius:10px !important; } #addTimeControlsModal .add-time-controls { grid-template-columns:minmax(0,1fr) !important; gap:13px !important; margin-top:14px !important; } #addTimeControlsModal .add-time-control-item--full { padding-bottom:12px !important; } #addTimeControlsModal .add-time-controls-actions { margin-top:14px !important; } #addTimeControlsModal .add-time-controls-actions .add-time-save-btn { width:100% !important; } } #addTimeControlsModal [data-project-picker-menu="addTimeProjectSelect"] { padding:5px !important; border:1px solid #dce4ee !important; border-radius:8px !important; background:#fff !important; box-shadow:0 12px 28px rgba(25,42,66,.14) !important; } #addTimeControlsModal [data-project-picker-option="addTimeProjectSelect"] { display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; min-height:39px !important; margin:2px 0 !important; padding:8px 10px !important; border:1px solid transparent !important; border-radius:6px !important; background:#fff !important; color:#26374d !important; text-align:right !important; box-shadow:none !important; transition:background-color .14s ease,border-color .14s ease,color .14s ease !important; } #addTimeControlsModal [data-project-picker-option="addTimeProjectSelect"] strong { color:inherit !important; font-size:12px !important; font-weight:500 !important; line-height:1.6 !important; } #addTimeControlsModal [data-project-picker-option="addTimeProjectSelect"] span { color:#2563eb !important; font-size:10px !important; font-weight:500 !important; } #addTimeControlsModal [data-project-picker-option="addTimeProjectSelect"]:hover { border-color:#e1eaff !important; background:#f5f8ff !important; color:#1d4ed8 !important; } #addTimeControlsModal [data-project-picker-option="addTimeProjectSelect"].is-selected { border-color:#cbdcff !important; background:#eff5ff !important; color:#1d4ed8 !important; } #addTimeControlsModal .add-time-controls-project-search-wrap { position:sticky; top:0; z-index:2; padding:2px 2px 6px; background:#fff; } #addTimeControlsModal .add-time-controls-project-search { display:block; width:100%; height:36px; padding:0 10px; border:1px solid #dce4ee; border-radius:6px; background:#f8fafc; color:#26374d; font-family:inherit; font-size:12px; outline:none; } #addTimeControlsModal .add-time-controls-project-search:focus { border-color:#8bb4ff; background:#fff; box-shadow:0 0 0 3px rgba(20,103,254,.09); } #addTimeControlsModal .add-time-controls-project-search::placeholder { color:#8996a6; } #addTimeControlsModal .add-time-controls-project-no-results { padding:14px 8px; color:#718096; font-size:12px; text-align:center; }