/* My Workplace (/emp) in Odoo's PORTAL face (owner, 14-Oct-2026 §3b + Q13: "portal + HR bhi Odoo jaise").

   The employee is not an Odoo user — his Odoo is the portal (/my), the face the customer's portal already wears
   (portal-odoo.css). Odoo's stylesheet is loaded first (Bootstrap, type, buttons, badges, dropdowns), then the page's
   own <style> (its arrangement, unchanged: phone-first), then this file, which
     1. writes the palette the page's arrangement was written against, on Odoo's values, light only;
     2. gives the page's components (card, btn, inp, pill, note, tbl, modal, toast …) Odoo's look;
     3. draws the shell as Odoo's portal: the website header with its menu, the breadcrumb under it, the login card;
     4. ⛔ undoes what Bootstrap's own .modal / .toast / .row / .grid / .card would otherwise do to this page's
        elements of the same name (a hidden dialog, a hidden toast, a 12-column grid, gutters in the hero).
   Not a word, a field or a rule of who-may-change-what moves (EMP_SELF_FIELDS stays the server's). */
:root {
  --o-brand: #714b67; --o-brand-h: #5f3f57; --o-action: #017e84; --o-action-h: #01585c;
  --o-g100: #f9fafb; --o-g200: #e7e9ed; --o-g300: #d8dadd; --o-g400: #9a9ca5; --o-g500: #7c7f89;
  --o-g600: #5f636f; --o-g700: #374151; --o-g800: #1f2937; --o-g900: #111827;
  --o-danger: #d44c59;
  /* the names the page's own <style> and emp.js spend */
  --bg: #fff; --surface: #fff; --surface-2: var(--o-g100); --sunk: var(--o-g100);
  --ink: var(--o-g900); --ink-2: var(--o-g700); --ink-3: var(--o-g500); --ink-4: var(--o-g400);
  --line: var(--o-g300); --line-2: var(--o-g200);
  --blue: var(--o-action); --blue-bg: #d1ecf1; --blue-ln: #bee5eb;
  --green: #1e7e34; --green-bg: #d4edda; --green-ln: #c3e6cb;
  --amber: #856404; --amber-bg: #fff3cd; --amber-ln: #ffeeba;
  --red: #b4232f; --red-2: #8f1d27; --red-bg: #f8d7da; --red-ln: #f5c6cb;
  --on-bad: #fff; --on-good: #fff; --on-warn: #fff;
  --rail: #fff; --rail-ink: var(--o-g900); --brand-red: var(--o-brand);
  --font: var(--body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --shadow: none; --shadow-lg: 0 4px 16px rgba(0, 0, 0, .12);
  /* the page's own aliases, re-pointed: no dark rail any more, Odoo's 4 px corners, no shadows */
  --navy: var(--o-brand); --navy-2: var(--o-brand-h); --navy-3: var(--o-g200);
  --accent: var(--o-danger); --accent-soft: var(--red-bg); --accent-ink: var(--red-2);
  --r: 4px; --r-sm: 3px; --r-lg: 6px;
}
body { background: #fff; color: var(--o-g700); font-size: 14px; line-height: 1.5; }
h1, h2, h3 { letter-spacing: 0; color: var(--o-g900); }
h1 { font-size: 24px; font-weight: 500; } h2 { font-size: 16px; font-weight: 500; } h3 { font-size: 14px; font-weight: 600; }

/* ── the shell: Odoo's website header, the portal breadcrumb under it ── */
.shell.o_emp { display: block; min-height: 100vh; }
.o_emp .o_portal_header { background: #fff; border-bottom: 1px solid var(--o-g200); position: sticky; top: 0; z-index: 20; }
.o_emp .o_portal_header .navbar { min-height: 56px; padding: 0 16px; max-width: 1140px; margin: 0 auto; display: flex;
  flex-wrap: nowrap; align-items: center; gap: 8px; }
.o_emp .navbar-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--o-g900); font-size: 18px;
  background: none; border: 0; padding: 0; margin-right: 16px; cursor: pointer; white-space: nowrap; }
.o_emp .navbar-brand .mark { width: 30px; height: 30px; border-radius: 6px; background: var(--o-brand); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; flex: none; }
.o_emp .navbar-nav { display: flex; flex-direction: row; align-items: stretch; flex: 1 1 auto; min-width: 0; }
.o_emp .o_portal_header .nav-link { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--o-g700); padding: 16px 10px;
  font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; }
.o_emp .o_portal_header .nav-link:hover { color: var(--o-brand); }
.o_emp .o_portal_header .nav-link.active { color: var(--o-brand); border-bottom-color: var(--o-brand); }
.o_emp .dropdown { position: relative; display: flex; }
.o_emp .dropdown-toggle::after { margin-left: 6px; }
.o_emp .dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 0; min-width: 200px; border-radius: 4px; border: 1px solid var(--o-g300);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12); padding: 6px 0; }
.o_emp .dropdown-menu-end { left: auto; right: 0; }
.o_emp .dropdown-item { display: flex; align-items: center; width: 100%; background: none; border: 0; text-align: left;
  font: inherit; font-size: 14px; color: var(--o-g700); padding: 6px 16px; cursor: pointer; }
.o_emp .dropdown-item:hover { background: var(--o-g100); color: var(--o-g900); }
.o_emp .dropdown-item.active { background: var(--o-g200); color: var(--o-g900); }
.o_emp .dot { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 10rem; background: var(--o-danger);
  color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.o_emp .dropdown-item .dot { margin-left: auto; }
.o_emp .o_emp_me { margin-left: auto; }
.o_emp .p-me { background: none; border: 0; border-radius: 4px; padding: 6px 8px; color: var(--o-g900); display: inline-flex;
  align-items: center; gap: 8px; cursor: pointer; font: inherit; }
.o_emp .p-me:hover { background: var(--o-g100); }
.o_emp .p-me .face { width: 26px; height: 26px; border-radius: 4px; background: var(--o-brand); color: #fff; font-size: 12px; font-style: normal; }
.o_emp .p-me span { font-size: 14px; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o_emp .p-menu-who { padding: 6px 16px 10px; border-bottom: 1px solid var(--o-g200); margin-bottom: 4px; }
.o_emp .p-menu-who .nm { font-weight: 600; color: var(--o-g900); }
.o_emp .p-menu-who .sb { font-size: 12px; color: var(--o-g500); }
.o_emp .burger { display: none; background: none; border: 0; font-size: 20px; color: var(--o-g700); padding: 4px 8px; cursor: pointer; }
.o_emp .rail { display: none; }
.o_emp > .main.o_portal { max-width: 1140px; margin: 0 auto; padding: 16px 16px 120px; display: block; }
.o_emp .breadcrumb { background: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; font-size: 14px; list-style: none; }
.o_emp .breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 8px; color: var(--o-g400); }
.o_emp .breadcrumb-item button { background: none; border: 0; padding: 0; font: inherit; color: var(--o-action); cursor: pointer; }
.o_emp .breadcrumb-item.active { color: var(--o-g600); }
.o_emp .view { padding: 0; max-width: none; }

/* a phone: Odoo's website header folds its menu behind ☰ below 992 px; the list opens from the left */
@media (max-width: 991.98px) {
  .o_emp .burger { display: block; }
  .o_emp .navbar-nav { display: none; }
  .o_emp .p-me span { display: none; }
  .o_emp .rail { display: block; position: fixed; left: 0; top: 0; bottom: 0; width: 280px; max-width: 86vw; z-index: 60;
    background: #fff; color: var(--o-g700); padding: 12px 0 24px; overflow: auto; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); height: auto; }
  body.nav .o_emp .rail { transform: none; }
  body.nav::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .3); z-index: 55; }
  .o_emp .rail .grp { font-size: 12px; font-weight: 700; color: var(--o-g500); text-transform: none; letter-spacing: 0; padding: 12px 16px 4px; }
  .o_emp .rail .o_emp_mitem { display: flex; align-items: center; width: 100%; background: none; border: 0; text-align: left;
    font: inherit; font-size: 15px; color: var(--o-g700); padding: 9px 16px; margin: 0; border-radius: 0; cursor: pointer; }
  .o_emp .rail .o_emp_mitem.active { background: var(--o-g200); color: var(--o-g900); font-weight: 500; }
  .o_emp .rail .o_emp_mitem .dot { margin-left: auto; }
  .o_emp > .main.o_portal { padding: 12px 12px 120px; }
}

/* ── the page's components in Odoo's look ── */
/* Odoo's notebook (the personal file's sections) */
.o_emp_tabs.nav-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0 0 12px;
  padding: 0; list-style: none; border-bottom: 1px solid var(--o-g300); }
.o_emp_tabs::-webkit-scrollbar { display: none; }
.o_emp_tabs .nav-item { flex: none; }
.o_emp_tabs .nav-link { background: none; font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; color: var(--o-g700);
  padding: 8px 16px; border: 1px solid transparent; border-radius: 4px 4px 0 0; margin-bottom: -1px; }
.o_emp_tabs .nav-link:hover { color: var(--o-g900); border-color: var(--o-g200) var(--o-g200) var(--o-g300); }
.o_emp_tabs .nav-link.active { color: var(--o-g900); background: #fff; border-color: var(--o-g300) var(--o-g300) #fff; font-weight: 500; }
.page-h { margin-bottom: 16px; }
.page-h .sub { color: var(--o-g600); font-size: 14px; }
.card { display: block; background: #fff; border: 1px solid var(--o-g300); border-radius: 4px; box-shadow: none; }
.card > .hd { background: var(--o-g100); padding: 10px 16px; border-bottom: 1px solid var(--o-g300); }
.card > .hd h2 { font-size: 15px; font-weight: 600; }
.card > .bd { padding: 14px 16px; }
/* ⛔ Bootstrap's .grid is a 12-column, fixed-row grid — this page's .grid is one column unless g2/g3/g4 say more */
.grid { grid-template-rows: none; }
.grid:not(.g2):not(.g3):not(.g4) { grid-template-columns: minmax(0, 1fr); }
/* the employee's header card — Odoo's employee form header, flat: photo, name, role, the four figures under it */
.hero { background: #fff; color: var(--o-g700); border: 1px solid var(--o-g300); border-radius: 4px; box-shadow: none; padding: 16px 20px; }
.hero::after { display: none; }
/* ⛔ Bootstrap's .row puts gutters and width:100% on every child — the photo and the name stacked */
.hero .row { margin: 0; --gutter-x: 0; --gutter-y: 0; flex-wrap: nowrap; }
.hero .row > * { width: auto; max-width: none; padding: 0; margin-top: 0; }
.hero .row > div:last-child { flex: 1 1 auto; }
.hero .face { width: 62px; height: 62px; border-radius: 4px; background: var(--o-brand); color: #fff; border: 0; }
.hero h1 { color: var(--o-g900); font-size: 22px; font-weight: 500; }
.hero .role { color: var(--o-g600); }
.hero .chip { background: var(--o-g200); border: 0; color: var(--o-g700); border-radius: 10rem; font-weight: 500; }
.hero .vit { border-top-color: var(--o-g200); }
.hero .v .k, .hero .v .s { color: var(--o-g500); }
.hero .v .n { color: var(--o-g900); font-weight: 500; }
.stat { border-color: var(--o-g300); border-radius: 4px; }
.stat .n { font-weight: 500; color: var(--o-g900); }
.facts { border-radius: 4px; }
.facts .f .v { font-weight: 500; color: var(--o-g900); }
.pill { border-radius: 10rem; font-weight: 500; padding: 2px 8px; }
.pill.dark { background: var(--o-g700); color: #fff; }
/* Odoo's list: a plain bold header, thin row lines, a hover */
table.tbl th { background: #fff; color: var(--o-g900); font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none;
  border-bottom: 1px solid var(--o-g300); padding: 8px 12px; }
table.tbl td { padding: 8px 12px; border-bottom-color: var(--o-g200); }
table.tbl tbody tr:hover td { background: var(--o-g100); }
/* Odoo's buttons: grey secondary, purple primary, 4 px, medium weight */
.btn { min-height: 0; padding: 5px 10px; border-radius: 4px; border: 1px solid transparent; background: var(--o-g200);
  color: var(--o-g900); font-weight: 500; font-size: 14px; line-height: 1.5; }
.btn:hover { background: var(--o-g300); color: var(--o-g900); }
.btn.primary { background: var(--o-brand); border-color: var(--o-brand); color: #fff; }
.btn.primary:hover { background: var(--o-brand-h); border-color: var(--o-brand-h); color: #fff; }
.btn.danger { background: var(--o-danger); border-color: var(--o-danger); color: #fff; }
.btn.danger:hover { background: #b83c48; color: #fff; }
.btn.sm { padding: 2px 8px; font-size: 13px; min-height: 0; }
.btn[disabled] { opacity: .65; }
/* Odoo's inputs */
.inp, select.inp, textarea.inp { min-height: 0; padding: 5px 10px; border: 1px solid var(--o-g300); border-radius: 4px; font-size: 14px;
  background-color: #fff; color: var(--o-g900); }
select.inp { padding-right: 1.875rem; appearance: none; background-repeat: no-repeat; background-position: right .625rem center;
  background-size: 16px 12px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231F2937' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.inp:focus { outline: 0; border-color: var(--o-action); box-shadow: 0 0 0 .2rem rgba(1, 126, 132, .15); }
.inp:disabled { background: var(--o-g100); border-style: solid; color: var(--o-g600); }
.fld > span { font-size: 14px; font-weight: 500; color: var(--o-g900); }
.note { border-radius: 4px; font-size: 14px; }
.tl .step.done::before { background: var(--o-action); border-color: var(--o-action); }
.tl .step.now::before { background: var(--o-brand); border-color: var(--o-brand); box-shadow: 0 0 0 4px #f1ecf0; }
.bar > span { background: var(--o-action); }
.spin { border-top-color: var(--o-brand); }
.hero-hol, .hol-row, .hol-row .dd, .hero-hol .cd, .ack-band, .ack-done { border-radius: 4px; }
.hol-chip { border-radius: 10rem; font-weight: 500; }
.skel { border-radius: 4px; }

/* ── Odoo's dialog — ⛔ Bootstrap's .modal is display:none, fixed and full-screen: this one lives inside .mbg ── */
.mbg { background: rgba(0, 0, 0, .5); backdrop-filter: none; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.mbg > .modal { display: block; position: relative; inset: auto; width: min(520px, 100%); max-width: 100%; height: auto; z-index: auto;
  overflow: auto; border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); background: #fff; }
.modal .mh { padding: 12px 16px; border-bottom-color: var(--o-g200); }
.modal .mh h2 { font-size: 18px; font-weight: 500; }
.modal .mb { padding: 16px; }
.modal .mf { padding: 12px 16px; border-top-color: var(--o-g200); }
@media (max-width: 760px) { .mbg > .modal { width: 100%; border-radius: 4px 4px 0 0; } }

/* ── Odoo's notification, top right — ⛔ Bootstrap hides a .toast that is not .show ── */
.toast, .toast:not(.show) { display: block; position: fixed; top: 64px; right: 16px; left: auto; bottom: auto; transform: none;
  width: auto; max-width: min(360px, calc(100vw - 32px)); background: #fff; color: var(--o-g700); border: 1px solid var(--o-g300);
  border-left: 4px solid #28a745; border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); padding: 10px 14px;
  font-size: 14px; font-weight: 400; z-index: 120; }
.toast.bad { background: #fff; border-left-color: var(--o-danger); }

/* ── the door: Odoo's login page ── */
.signin { background: var(--o-g100); }
.resign { background: rgba(0, 0, 0, .5); backdrop-filter: none; }
.signin .box, .resign .box { border-radius: 4px; border: 1px solid var(--o-g200); box-shadow: 0 2px 12px rgba(0, 0, 0, .08); max-width: 380px; }
.signin .mark, .resign .mark { background: var(--o-brand); color: #fff; border-radius: 6px; margin: 0 auto 16px; }
.signin h1, .resign h1 { font-size: 20px; font-weight: 500; text-align: center; }
.signin .sub, .resign .sub { text-align: center; }
.signin .btn.primary, .resign .btn.primary { padding: 8px 12px; }
.err { color: var(--o-danger); }