:root { --portal-ink: #2b241d; --portal-muted: #786e63; --portal-green: #6f8b64; --portal-paper: #fcfaf5; }
* { box-sizing: border-box; }
body.portal-body { margin: 0; min-height: 100vh; color: var(--portal-ink); background: linear-gradient(135deg, #f5efe5, #e7eee4); font-family: Manrope, Arial, sans-serif; }
.portal-nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 6%; background: rgba(252,250,245,.86); border-bottom: 1px solid rgba(43,36,29,.08); }
.portal-brand { color: var(--portal-ink); font-family: Georgia, serif; font-size: 1.3rem; font-weight: 700; text-decoration: none; }
.portal-nav-actions { display: flex; align-items: center; gap: 18px; color: var(--portal-muted); font-size: .9rem; }
.portal-nav-actions form { margin: 0; }.portal-nav-actions button { border: 0; background: transparent; color: var(--portal-green); font-weight: 700; }
.portal-container { width: min(1100px, 92%); margin: 54px auto; }.portal-auth-card, .portal-card { background: rgba(252,250,245,.94); border: 1px solid rgba(43,36,29,.08); border-radius: 22px; box-shadow: 0 18px 45px rgba(70,60,40,.09); }
.portal-auth-card { width: min(480px, 100%); margin: 35px auto; padding: 40px; }.portal-auth-card h1, .portal-heading h1 { font-family: Georgia, serif; font-weight: 700; }.portal-auth-card p, .portal-heading p { color: var(--portal-muted); }
.portal-auth-card label { display: block; margin: 18px 0 7px; font-weight: 700; font-size: .88rem; }.portal-auth-card .form-control { padding: 12px 14px; border-radius: 10px; }
.portal-eyebrow { color: var(--portal-green); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800; }.portal-button { display: inline-block; border: 0; border-radius: 10px; padding: 12px 18px; background: var(--portal-green); color: white; text-decoration: none; font-weight: 800; }
.portal-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 25px; }.portal-card { padding: 8px 25px; }.booking-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 0; border-bottom: 1px solid rgba(43,36,29,.1); }.booking-row:last-child { border-bottom: 0; }.booking-main { min-width: 0; flex: 1; }.booking-row-stacked form { width: min(240px, 100%); flex: 0 0 min(240px, 100%); }.status-pill { display: inline-block; padding: 5px 10px; border-radius: 99px; background: #e5eee1; color: #55704d; font-size: .8rem; font-weight: 800; }.text-muted { color: var(--portal-muted)!important; font-size: .88rem; margin-top: 5px; }.empty-state { padding: 40px 0; color: var(--portal-muted); text-align: center; }.assignment-timeline { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(43,36,29,.1); border-radius: 14px; background: #fffdf8; }.timeline-entry { position: relative; display: flex; gap: 10px; margin-top: 12px; padding-left: 2px; }.timeline-dot { width: 9px; height: 9px; margin-top: 6px; flex: 0 0 9px; border-radius: 50%; background: #55704d; box-shadow: 0 0 0 3px #e5eee1; }.timeline-note { margin-top: 4px; color: var(--portal-muted); font-size: .86rem; }
@media (max-width: 700px) { .portal-heading, .booking-row { align-items: stretch; flex-direction: column; }.booking-row-stacked form { width: 100%; flex-basis: auto; }.portal-auth-card { padding: 28px 22px; } }

.booking-main { min-width: 0; flex: 1; }
.assignment-timeline { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(43,36,29,.1); border-radius: 14px; background: #fffdf8; }
.timeline-entry { display: flex; gap: 10px; margin-top: 12px; }
.timeline-dot { width: 9px; height: 9px; margin-top: 6px; flex: 0 0 9px; border-radius: 50%; background: #55704d; box-shadow: 0 0 0 3px #e5eee1; }
.timeline-note { margin-top: 4px; color: var(--portal-muted); font-size: .86rem; }

/* Customer dashboard */
.customer-dashboard { max-width: 1180px; margin: 0 auto; }
.customer-hero { position: relative; display: flex; justify-content: space-between; overflow: hidden; min-height: 265px; padding: 48px 54px; border-radius: 30px; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 28%), linear-gradient(120deg, #294d3b 0%, #6b8c68 100%); box-shadow: 0 22px 50px rgba(50,75,55,.2); }
.customer-hero:after { content: ''; position: absolute; right: -70px; bottom: -120px; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.04), 0 0 0 58px rgba(255,255,255,.035); }
.customer-hero-copy { position: relative; z-index: 1; max-width: 650px; }
.customer-hero .portal-eyebrow { color: #d9ebd7; }
.customer-hero h1 { margin: 12px 0 10px; color: #fff; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.04em; }
.customer-hero p { max-width: 560px; margin: 0; color: rgba(255,255,255,.78); font-size: 1.04rem; line-height: 1.7; }
.customer-hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
.customer-hero .portal-button { background: #fff; color: #315c43; box-shadow: 0 10px 22px rgba(20,40,25,.15); }
.customer-hero .portal-button span { margin-left: 8px; font-size: 1.1rem; }
.customer-secondary-link { color: #fff; font-size: .9rem; font-weight: 800; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 3px; }
.customer-hero-mark { position: relative; z-index: 1; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-right: 35px; color: rgba(255,255,255,.78); text-align: center; }
.customer-hero-mark span { display: grid; place-items: center; width: 92px; height: 92px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; font-size: 2rem; font-weight: 700; }.customer-hero-mark i { font-size: 2rem; }
.customer-hero-mark small { font-size: .68rem; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.customer-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 30px; }
.customer-stat-card { display: flex; align-items: center; gap: 15px; padding: 21px 20px; border: 1px solid rgba(43,36,29,.08); border-radius: 18px; background: rgba(252,250,245,.9); box-shadow: 0 10px 25px rgba(70,60,40,.045); }
.customer-stat-card-accent { background: #eef6ed; border-color: #d4e6d2; }
.customer-stat-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: #55704d; background: #e5eee1; font-size: 1.3rem; font-weight: 800; }
.customer-stat-card strong, .customer-stat-card span { display: block; }
.customer-stat-card strong { color: #2b241d; font-size: 1.45rem; line-height: 1.2; }
.customer-stat-card div span { margin-top: 4px; color: var(--portal-muted); font-size: .75rem; font-weight: 700; }
.upcoming-card { padding: 26px 30px; border: 1px solid #cfe2cd; border-radius: 22px; background: linear-gradient(105deg, #f5fbf3, #edf6ed); box-shadow: 0 12px 28px rgba(70,100,70,.06); }
.upcoming-label { display: flex; align-items: center; gap: 8px; color: #438052; font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.upcoming-dot { width: 8px; height: 8px; border-radius: 50%; background: #3c9b5d; box-shadow: 0 0 0 4px #d9efdc; }
.upcoming-content { display: flex; justify-content: space-between; gap: 25px; margin-top: 17px; }
.upcoming-content h2 { margin: 0 0 7px; color: #254936; font-family: Georgia, serif; font-size: 1.5rem; }
.upcoming-content p { margin: 0; color: #43634c; font-weight: 800; }.upcoming-content p span, .customer-booking-main p span { color: #9bb29d; padding: 0 5px; }.upcoming-content small { display: block; margin-top: 9px; color: #718575; }.upcoming-price { display: flex; align-items: flex-end; flex-direction: column; gap: 10px; white-space: nowrap; }.upcoming-price strong { color: #255c38; font-size: 1.25rem; }
.customer-bookings-section { margin-top: 38px; }.customer-section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 15px; }.customer-section-heading h2 { margin: 7px 0 0; color: #2b241d; font-family: Georgia, serif; font-size: 1.85rem; }.customer-result-count { color: var(--portal-muted); font-size: .85rem; font-weight: 700; }
.customer-booking-list { overflow: hidden; border: 1px solid rgba(43,36,29,.08); border-radius: 22px; background: rgba(252,250,245,.94); box-shadow: 0 14px 35px rgba(70,60,40,.06); }.customer-booking-card { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; gap: 22px; padding: 24px 28px; border-bottom: 1px solid rgba(43,36,29,.08); }.customer-booking-card:last-child { border-bottom: 0; }.booking-date-block { display: flex; align-items: center; flex-direction: column; justify-content: center; width: 64px; height: 64px; border-radius: 17px; color: #55704d; background: #e9f2e7; }.booking-date-block strong { font-size: 1.45rem; line-height: 1; }.booking-date-block span { margin-top: 5px; font-size: .7rem; font-weight: 800; text-transform: uppercase; }.customer-booking-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }.customer-booking-title h3 { margin: 0; color: #302b25; font-size: 1.05rem; }.customer-booking-main p { margin: 6px 0 0; color: var(--portal-muted); font-size: .82rem; font-weight: 700; }.customer-booking-main small { display: block; overflow: hidden; margin-top: 7px; color: #9a9188; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }.customer-booking-total { text-align: right; }.customer-booking-total span { display: block; margin-bottom: 5px; color: #a0978e; font-size: .72rem; font-weight: 700; text-transform: uppercase; }.customer-booking-total strong { color: #2c4431; font-size: 1.05rem; }.status-confirmed { color: #276a58; background: #dcefe9; }.status-assigned { color: #496c8e; background: #e1edf7; }.status-progress { color: #956b2b; background: #fbefd2; }.status-completed { color: #397346; background: #e1f2e4; }.status-cancelled { color: #a24d47; background: #f9e3e1; }.customer-pagination { padding-top: 20px; }.customer-pagination nav { display: flex; justify-content: center; }
.customer-empty { padding: 70px 25px; text-align: center; }.customer-empty-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 15px; border-radius: 18px; color: #55704d; background: #e5eee1; font-size: 1.6rem; }.customer-empty h3 { margin: 0; font-family: Georgia, serif; font-size: 1.4rem; }.customer-empty p { max-width: 390px; margin: 10px auto 22px; color: var(--portal-muted); line-height: 1.6; }
@media (max-width: 850px) { .customer-stat-grid { grid-template-columns: repeat(2, 1fr); }.customer-hero-mark { margin-right: 0; } }
@media (max-width: 600px) { .customer-hero { min-height: auto; padding: 34px 25px; }.customer-hero-mark { display: none; }.customer-hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }.customer-stat-grid { gap: 10px; }.customer-stat-card { padding: 15px 12px; }.customer-stat-icon { width: 32px; height: 32px; border-radius: 9px; font-size: 1rem; }.customer-stat-card strong { font-size: 1.15rem; }.customer-stat-card div span { font-size: .65rem; }.upcoming-card { padding: 21px; }.upcoming-content { align-items: flex-start; flex-direction: column; }.upcoming-price { align-items: flex-start; flex-direction: row; }.customer-section-heading h2 { font-size: 1.55rem; }.customer-booking-card { grid-template-columns: 54px minmax(0,1fr); gap: 14px; padding: 19px 16px; }.booking-date-block { width: 54px; height: 54px; border-radius: 14px; }.booking-date-block strong { font-size: 1.2rem; }.customer-booking-total { grid-column: 2; text-align: left; }.customer-booking-total span { display: inline; margin-right: 8px; }.customer-booking-main small { white-space: normal; } }

/* Employee dashboard */
.employee-dashboard { max-width: 1180px; margin: 0 auto; }
.employee-hero { position: relative; display: flex; justify-content: space-between; overflow: hidden; min-height: 245px; padding: 42px 50px; border-radius: 30px; color: #fff; background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.17), transparent 25%), linear-gradient(120deg, #182f47 0%, #32647b 100%); box-shadow: 0 22px 50px rgba(24,48,70,.2); }
.employee-hero:after { content: ''; position: absolute; right: -90px; bottom: -160px; width: 380px; height: 380px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 32px rgba(255,255,255,.04), 0 0 0 66px rgba(255,255,255,.03); }
.employee-hero-copy { position: relative; z-index: 1; max-width: 700px; }.employee-hero .portal-eyebrow { color: #c5e0ea; }.employee-hero h1 { margin: 12px 0 10px; color: #fff; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; }.employee-hero p { max-width: 610px; margin: 0; color: rgba(255,255,255,.76); line-height: 1.65; }.employee-identity { display: flex; align-items: center; gap: 12px; margin-top: 24px; }.employee-avatar { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(255,255,255,.14); }.employee-identity strong, .employee-identity small { display: block; }.employee-identity small { margin-top: 3px; color: rgba(255,255,255,.65); font-size: .76rem; }.employee-hero-icon { position: relative; z-index: 1; align-self: center; display: grid; place-items: center; width: 100px; height: 100px; margin-right: 35px; border: 1px solid rgba(255,255,255,.35); border-radius: 28px; color: #fff; font-size: 2.5rem; transform: rotate(8deg); }
.employee-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 30px; }.employee-stat-card { display: flex; align-items: center; gap: 15px; padding: 21px 20px; border: 1px solid rgba(43,36,29,.08); border-radius: 18px; color: inherit; background: rgba(252,250,245,.9); box-shadow: 0 10px 25px rgba(70,60,40,.045); text-decoration: none; }.employee-stat-card:hover { color: inherit; border-color: #8eb7a9; transform: translateY(-1px); }.employee-stat-accent { background: #edf5f7; border-color: #d2e4e9; }.employee-stat-icon { display: grid; place-items: center; flex: 0 0 39px; width: 39px; height: 39px; border-radius: 12px; color: #32647b; background: #e1eff2; font-size: 1.1rem; }.employee-stat-card strong, .employee-stat-card span { display: block; }.employee-stat-card .employee-stat-icon { display: grid; place-items: center; }.employee-stat-card strong { color: #27313a; font-size: 1.45rem; line-height: 1.2; }.employee-stat-card div span { margin-top: 4px; color: var(--portal-muted); font-size: .75rem; font-weight: 700; }
.employee-next-job { padding: 25px 30px; border: 1px solid #c8dfe6; border-radius: 22px; background: linear-gradient(105deg, #f3fafb, #eaf4f7); box-shadow: 0 12px 28px rgba(45,95,115,.06); }.employee-next-label { color: #32647b; font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.employee-next-label i { margin-right: 6px; }.employee-next-content { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-top: 15px; }.employee-next-content h2 { margin: 0 0 7px; color: #203f4d; font-family: Georgia, serif; font-size: 1.5rem; }.employee-next-content p, .employee-next-content small { display: block; margin: 0; color: #50717c; font-weight: 800; }.employee-next-content small { margin-top: 8px; font-size: .82rem; font-weight: 600; }.employee-next-content i { margin-right: 5px; }.employee-jobs-section { margin-top: 38px; }.employee-section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 15px; }.employee-section-heading h2 { margin: 7px 0 0; color: #2b241d; font-family: Georgia, serif; font-size: 1.85rem; }.employee-result-count { color: var(--portal-muted); font-size: .85rem; font-weight: 700; }
.employee-job-list { overflow: hidden; border: 1px solid rgba(43,36,29,.08); border-radius: 22px; background: rgba(252,250,245,.94); box-shadow: 0 14px 35px rgba(70,60,40,.06); }.employee-job-card { display: grid; grid-template-columns: 68px minmax(0,1fr) 235px; gap: 22px; padding: 27px 28px; border-bottom: 1px solid rgba(43,36,29,.08); }.employee-job-card:last-child { border-bottom: 0; }.employee-job-date { display: flex; align-items: center; flex-direction: column; justify-content: center; width: 64px; height: 64px; border-radius: 17px; color: #32647b; background: #e5f1f4; }.employee-job-date strong { font-size: 1.45rem; line-height: 1; }.employee-job-date span { margin-top: 5px; font-size: .7rem; font-weight: 800; text-transform: uppercase; }.employee-job-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }.employee-job-title h3 { margin: 0; color: #302b25; font-size: 1.1rem; }.employee-job-meta, .employee-job-customer, .employee-job-address { margin: 7px 0 0; color: var(--portal-muted); font-size: .82rem; font-weight: 700; }.employee-job-customer { color: #496275; }.employee-job-address { overflow: hidden; color: #8d867e; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }.employee-job-meta i, .employee-job-customer i, .employee-job-address i { width: 15px; margin-right: 5px; color: #6594a4; }.employee-job-meta span, .employee-job-customer span { color: #aab8bc; padding: 0 5px; }.employee-job-action { padding: 5px 0 0; }.employee-action-label { display: block; margin-bottom: 9px; color: #6a777d; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.employee-job-action select, .employee-job-action textarea { border: 1px solid #d8dfdf; border-radius: 10px; }.employee-job-action textarea { min-height: 70px; margin-top: 9px; resize: vertical; }.employee-job-action .portal-button { margin-top: 9px; background: #32647b; font-size: .85rem; }.employee-empty { padding: 70px 25px; text-align: center; }.employee-empty-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 15px; border-radius: 18px; color: #32647b; background: #e1eff2; font-size: 1.55rem; }.employee-empty h3 { margin: 0; font-family: Georgia, serif; font-size: 1.4rem; }.employee-empty p { margin: 10px auto 0; color: var(--portal-muted); }
@media (max-width: 900px) { .employee-stat-grid { grid-template-columns: repeat(2, 1fr); }.employee-job-card { grid-template-columns: 64px minmax(0,1fr); }.employee-job-action { grid-column: 2; }.employee-hero-icon { margin-right: 0; } }
@media (max-width: 600px) { .employee-hero { min-height: auto; padding: 34px 25px; }.employee-hero-icon { display: none; }.employee-stat-grid { gap: 10px; }.employee-stat-card { padding: 15px 12px; }.employee-stat-icon { width: 32px; height: 32px; border-radius: 9px; font-size: .9rem; }.employee-stat-card strong { font-size: 1.15rem; }.employee-stat-card div span { font-size: .65rem; }.employee-next-job { padding: 21px; }.employee-next-content { align-items: flex-start; flex-direction: column; }.employee-job-card { grid-template-columns: 54px minmax(0,1fr); gap: 14px; padding: 20px 16px; }.employee-job-date { width: 54px; height: 54px; border-radius: 14px; }.employee-job-date strong { font-size: 1.2rem; }.employee-job-action { grid-column: 2; }.employee-section-heading h2 { font-size: 1.55rem; } }

/* Team reference layout */
.staff-dashboard { max-width: 1120px; margin: 0 auto; color: #1f2933; }
.staff-dashboard-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 0 18px; }
.staff-brand { color: #15352d; font-size: 20px; font-weight: 900; }.staff-brand span { color: #2f6f5e; }.staff-logged-in { color: var(--portal-muted); font-size: 13px; }
.staff-team-switch { display: grid; grid-template-columns: minmax(220px, 360px); margin-bottom: 14px; }.staff-team-button { padding: 14px; border: 1px solid #2f6f5e; border-radius: 16px; color: #fff; background: #2f6f5e; font-weight: 900; }
.staff-team-button i { margin-right: 6px; }.staff-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; }.staff-tab { padding: 10px 16px; border: 1px solid #dde6e2; border-radius: 999px; color: #667085; background: #fff; font-weight: 800; text-decoration: none; white-space: nowrap; }.staff-tab.active { color: #fff; border-color: #15352d; background: #15352d; }.staff-tab i { margin-right: 5px; }
.staff-booking-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; }.staff-order-list { display: grid; align-content: start; gap: 10px; }.staff-order-card { width: 100%; padding: 14px; border: 1px solid #dde6e2; border-radius: 18px; color: #1f2933; background: #fff; box-shadow: 0 10px 30px rgba(21,53,45,.08); text-align: left; cursor: pointer; }.staff-order-card.active { border: 2px solid #2f6f5e; padding: 13px; }.staff-order-topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; }.staff-order-topline strong { color: #15352d; }.staff-order-title { display: block; margin: 10px 0 4px; font-size: 16px; }.staff-order-meta { display: block; color: #667085; font-size: 13px; line-height: 1.5; }.staff-order-price { display: block; margin-top: 8px; color: #2f6f5e; font-weight: 900; }.staff-order-team { display: block; margin-top: 8px; color: #667085; }.staff-order-team i { margin-right: 4px; }
.staff-booking-detail { min-width: 0; }.staff-detail-panel { overflow: hidden; border: 1px solid #dde6e2; border-radius: 24px; background: #fff; box-shadow: 0 10px 30px rgba(21,53,45,.08); }.staff-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px; border-bottom: 1px solid #dde6e2; }.staff-detail-head h1 { margin: 0 0 6px; color: #15352d; font-size: 22px; }.staff-detail-head p { margin: 0; color: #667085; font-size: 13px; }.staff-detail-section { padding: 18px; border-bottom: 1px solid #dde6e2; }.staff-detail-section:last-child { border-bottom: 0; }.staff-detail-section h3 { margin: 0 0 12px; color: #15352d; font-size: 15px; letter-spacing: .7px; text-transform: uppercase; }.staff-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.staff-info-grid div { padding: 12px; border: 1px solid #dde6e2; border-radius: 14px; background: #f8faf9; }.staff-info-grid .full { grid-column: 1 / -1; }.staff-info-grid small { display: block; margin-bottom: 3px; color: #667085; font-size: 12px; }.staff-info-grid strong { font-size: 14px; }.staff-task-list { display: grid; gap: 8px; }.staff-task-list div { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #dde6e2; border-radius: 14px; background: #f8faf9; }.staff-task-list span { color: #667085; white-space: nowrap; }.staff-notes { margin: 0; color: #667085; line-height: 1.6; }.staff-action-help { color: #667085; }.staff-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.staff-btn { border: 0; border-radius: 14px; padding: 13px 14px; font-weight: 900; cursor: pointer; }.staff-btn-green { color: #fff; background: #2f6f5e; }.staff-btn-deep { color: #fff; background: #15352d; }.staff-btn-red { color: #d92d20; border: 1px solid #ffd2cc; background: #fff1f0; }.staff-reject-note { margin-bottom: 8px; border-radius: 10px; }.staff-empty, .staff-detail-empty { padding: 24px; color: #667085; border: 1px dashed #dde6e2; border-radius: 18px; background: #fff; text-align: center; }
@media (max-width: 820px) { .staff-booking-layout { grid-template-columns: 1fr; }.staff-order-list { grid-template-columns: 1fr; }.staff-detail-head { display: block; }.staff-detail-head .status-pill { display: inline-block; margin-top: 12px; } }
@media (max-width: 560px) { .staff-dashboard-header { align-items: flex-start; flex-direction: column; }.staff-logged-in { font-size: 12px; }.staff-info-grid, .staff-action-grid { grid-template-columns: 1fr; }.staff-info-grid .full { grid-column: auto; }.staff-task-list div { align-items: flex-start; flex-direction: column; }.staff-team-switch { grid-template-columns: 1fr; } }
.staff-booking-layout { grid-template-columns: 300px minmax(260px, .9fr) minmax(300px, 1.1fr); align-items: start; }.staff-booking-detail { display: contents; }.staff-detail-panel { display: contents; }.staff-detail-head { grid-column: 2; grid-row: 1; min-height: 116px; border: 1px solid #dde6e2; border-radius: 24px; background: #fff; box-shadow: 0 10px 30px rgba(21,53,45,.08); }.staff-detail-section { grid-column: 3; background: #fff; }.staff-detail-section:first-of-type { border-top: 1px solid #dde6e2; border-radius: 24px 24px 0 0; }.staff-detail-section:last-of-type { border-bottom: 1px solid #dde6e2; border-radius: 0 0 24px 24px; box-shadow: 0 10px 30px rgba(21,53,45,.08); }
@media (max-width: 1100px) and (min-width: 821px) { .staff-booking-layout { grid-template-columns: 260px minmax(220px, .85fr) minmax(260px, 1.15fr); gap: 12px; } }
@media (max-width: 820px) { .staff-booking-layout { display: grid; grid-template-columns: 1fr; }.staff-order-list { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; }.staff-booking-detail { display: block; }.staff-detail-panel { display: block; }.staff-detail-head, .staff-detail-section { grid-column: auto; grid-row: auto; }.staff-detail-head { display: block; }.staff-detail-head .status-pill { display: inline-block; margin-top: 12px; }.staff-detail-section:first-of-type, .staff-detail-section:last-of-type { border-radius: 0; box-shadow: none; } }
.staff-booking-layout { grid-template-columns: 350px minmax(0, 1fr); gap: 22px; align-items: start; }.staff-booking-detail { display: block; min-width: 0; }.staff-detail-panel { display: block; overflow: hidden; border: 1px solid #dde6e2; border-radius: 24px; background: #fff; box-shadow: 0 12px 30px rgba(21,53,45,.08); }.staff-detail-head, .staff-detail-section { grid-column: auto; grid-row: auto; }.staff-detail-head { min-height: 0; border: 0; border-bottom: 1px solid #dde6e2; border-radius: 0; box-shadow: none; }.staff-detail-section { border-radius: 0 !important; box-shadow: none !important; }.staff-detail-section:last-child { border-bottom: 0; }.staff-order-card { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }.staff-order-card:hover { border-color: #8eb7a9; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(21,53,45,.12); }.staff-order-meta { line-height: 1.65; }.staff-detail-section h3 { font-size: 13px; letter-spacing: .08em; }.staff-detail-head h1 { font-size: 24px; }
@media (max-width: 820px) { .staff-booking-layout { grid-template-columns: 1fr; gap: 16px; }.staff-detail-panel { border-radius: 18px; }.staff-detail-head { display: block; }.staff-detail-head .status-pill { display: inline-block; margin-top: 12px; } }
 .staff-extra-form { display: grid; grid-template-columns: minmax(0, 1fr) 120px 48px; gap: 8px; }.staff-extra-form select, .staff-extra-form input { min-width: 0; padding: 12px; border: 1px solid #dde6e2; border-radius: 12px; background: #fff; }.staff-detail-tabs { display: flex; gap: 8px; padding: 12px 18px 0; border-bottom: 1px solid #dde6e2; overflow-x: auto; }.staff-detail-tab { padding: 10px 12px; border: 0; border-bottom: 3px solid transparent; color: #667085; background: transparent; font-weight: 800; cursor: pointer; white-space: nowrap; }.staff-detail-tab.active { border-bottom-color: #2f6f5e; color: #15352d; }.staff-detail-tab-panel[hidden] { display: none; }
 .staff-workflow-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.staff-workflow-heading h3 { margin-bottom: 0; }.staff-workflow-heading strong { color: #2f6f5e; font-size: 13px; }.staff-workflow-progress { height: 7px; margin: 14px 0; overflow: hidden; border-radius: 999px; background: #e9efec; }.staff-workflow-progress span { display: block; height: 100%; border-radius: inherit; background: #2f6f5e; }.staff-workflow-list { display: grid; gap: 8px; }.staff-workflow-step { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #dde6e2; border-radius: 12px; background: #f8faf9; }.staff-workflow-step > div { flex: 1; min-width: 0; }.staff-workflow-step strong, .staff-workflow-step small { display: block; }.staff-workflow-step small { margin-top: 2px; color: #667085; font-size: 12px; }.staff-workflow-step.done > .staff-workflow-state { color: #2f6f5e; }.staff-workflow-state { color: #667085; font-size: 12px; font-weight: 800; white-space: nowrap; }.staff-workflow-step.done { border-color: #b8d7c8; background: #eff8f2; }.staff-workflow-step.current { border-color: #e4c98b; background: #fffaf0; }.staff-workflow-icon { display: grid; place-items: center; width: 28px; flex: 0 0 28px; font-size: 19px; text-align: center; }.staff-workflow-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }.staff-workflow-inline input[type=file] { max-width: 170px; padding: 5px; border: 1px dashed #8eb7a9; border-radius: 8px; background: #fff; font-size: 11px; }.staff-workflow-form-wide { flex: 1 1 100%; margin-left: 38px; }.staff-workflow-form-wide .staff-checklist-item { flex: 1 1 auto; }.staff-workflow-eye { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; border: 1px solid #b8d7c8; border-radius: 10px; color: #2f6f5e; background: #eff8f2; cursor: pointer; }.staff-workflow-eye:hover { color: #fff; background: #2f6f5e; }.staff-workflow-modal[hidden] { display: none; }.staff-workflow-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }.staff-workflow-modal-backdrop { position: absolute; inset: 0; background: rgba(21,53,45,.45); }.staff-workflow-dialog { position: relative; width: min(620px, 100%); max-height: 90vh; overflow: auto; padding: 20px; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(21,53,45,.25); }.staff-workflow-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }.staff-workflow-photo-grid a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #f8faf9; }.staff-workflow-photo-grid img { width: 100%; height: 100%; object-fit: cover; }.staff-workflow-upload-form { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid #dde6e2; }.staff-workflow-action { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #dde6e2; }.staff-upload-label { display: grid; gap: 6px; color: #15352d; font-size: 13px; font-weight: 800; }.staff-upload-label input { padding: 9px; border: 1px dashed #8eb7a9; border-radius: 10px; background: #f8faf9; font-weight: 400; }.staff-checklist-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #dde6e2; border-radius: 10px; background: #f8faf9; font-size: 13px; }.staff-checklist-modal[hidden] { display: none; }.staff-checklist-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }.staff-checklist-modal-backdrop { position: absolute; inset: 0; background: rgba(21,53,45,.45); }.staff-checklist-dialog { position: relative; width: min(520px, 100%); max-height: 90vh; overflow: auto; padding: 20px; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(21,53,45,.25); }.staff-checklist-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }.staff-checklist-dialog-head h3 { margin: 0; color: #15352d; }.staff-checklist-close { border: 0; color: #667085; background: transparent; font-size: 20px; cursor: pointer; }.staff-checklist-items { display: grid; gap: 8px; margin-bottom: 16px; }.staff-checklist-item small { margin-left: auto; color: #667085; font-size: 12px; }
.staff-booking-layout { grid-template-columns: 350px minmax(0, 1fr); gap: 22px; }.staff-left-column { display: grid; align-content: start; gap: 16px; min-width: 0; }.staff-left-column .timeline { overflow: hidden; border: 1px solid #dde6e2; border-radius: 24px; background: #fff; box-shadow: 0 12px 30px rgba(21,53,45,.08); }.staff-left-column .timeline .staff-detail-section { border-bottom: 0; }
@media (max-width: 820px) { .staff-booking-layout { grid-template-columns: 1fr; }.staff-left-column { gap: 16px; }.staff-booking-detail { grid-column: 1; } }
.staff-workflow-signature { display: block; max-width: 100%; max-height: 180px; margin: 0 auto 16px; object-fit: contain; }
.staff-workflow-guide { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 10px 12px; border: 1px solid #c8dfe6; border-radius: 12px; color: #32647b; background: #f3fafb; }.staff-workflow-guide > i { font-size: 18px; }.staff-workflow-guide span { display: grid; gap: 2px; }.staff-workflow-guide strong { color: #203f4d; font-size: 13px; }.staff-workflow-guide small { color: #50717c; font-size: 12px; }
.staff-reject-modal[hidden] { display: none; }.staff-reject-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.staff-order-card-action { margin-top: 12px; }.staff-order-card-action .staff-btn { width: 100%; padding: 10px 12px; }.staff-order-card-actions { display: grid; grid-template-columns: 7fr 3fr; gap: 8px; }.staff-order-card-actions .staff-order-card-action { min-width: 0; }.staff-order-card-actions .staff-btn { white-space: nowrap; }

/* Current employee detail layout */
.detail { overflow: hidden; border: 1px solid #dde6e2; border-radius: 24px; background: #fff; box-shadow: 0 12px 30px rgba(21,53,45,.08); }
.order-detail[hidden] { display: none; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px; border-bottom: 1px solid #dde6e2; }
.detail-head h1 { margin: 0 0 6px; color: #15352d; font-size: 24px; }
.meta { color: #667085; font-size: 13px; line-height: 1.5; }
.section { padding: 18px; border-bottom: 1px solid #dde6e2; }
.section:last-child { border-bottom: 0; }
.section h3 { margin: 0 0 12px; color: #15352d; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info { padding: 12px; border: 1px solid #dde6e2; border-radius: 14px; background: #f8faf9; }
.info small { display: block; margin-bottom: 3px; color: #667085; font-size: 12px; }
.info strong { font-size: 14px; }
.task-list { display: grid; gap: 8px; }
.task { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #dde6e2; border-radius: 14px; background: #f8faf9; }
.task-service { display: flex; align-items: center; gap: 10px; min-width: 0; }
.task-service input { width: 19px; height: 19px; accent-color: #2f6f5e; }
.task b { color: #15352d; }
.task.done-service b { text-decoration: line-through; color: #667085; }
.checklist-feedback { display: block; min-height: 18px; margin: 0 0 8px; color: #667085; font-size: 12px; }
.checklist-feedback-success { color: #2f6f5e; }
.checklist-feedback-error { color: #d92d20; }
.employee-action-notice { display: block; max-width: 1180px; margin: 0 auto 12px; padding: 12px 16px; border: 1px solid #b8d7c8; border-radius: 12px; color: #245b49; background: #eff8f2; box-shadow: 0 6px 18px rgba(21,53,45,.08); font-size: 13px; font-weight: 800; }
.employee-action-notice.is-error { background: #d92d20; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photo-group { min-width: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.photo-grid:empty { display: none; }
.photo-grid a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #f2f6f4; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.photo-item { position: relative; min-width: 0; }
.photo-item .photo-delete { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; color: #fff; background: rgba(164, 62, 54, .9); cursor: pointer; font-size: 18px; line-height: 1; }
.photo-item .photo-delete:disabled { opacity: .55; cursor: wait; }
.detail-form { display: grid; gap: 10px; }
.detail-form input[type=file], .detail-form input[type=number], .detail-form select { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #dde6e2; border-radius: 12px; background: #fff; }
.add-job { display: grid; grid-template-columns: minmax(0, 1fr) 120px 48px; gap: 8px; }
.btn { border: 0; border-radius: 14px; padding: 13px 14px; font-weight: 900; cursor: pointer; }
.btn.deep { color: #fff; background: #15352d; }
.btn.green { color: #fff; background: #2f6f5e; }
.btn.red { color: #d92d20; border: 1px solid #ffd2cc; background: #fff1f0; }
.btn.light { color: #15352d; border: 1px solid #dde6e2; background: #f2f6f4; }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.workflow-list { display: grid; gap: 8px; }
.workflow-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #dde6e2; border-radius: 12px; color: #667085; background: #f8faf9; }
.workflow-row strong { flex: 1; color: #1f2933; }
.workflow-row.done { border-color: #b8d7c8; background: #eff8f2; }.workflow-row.done i { color: #2f6f5e; }.workflow-row.current { border-color: #e4c98b; background: #fffaf0; }
.empty { padding: 24px; color: #667085; text-align: center; }
@media (max-width: 820px) { .detail-head { display: block; }.detail-head .badge { display: inline-block; margin-top: 12px; } }
@media (max-width: 560px) { .grid, .photos, .actions { grid-template-columns: 1fr; }.add-job { grid-template-columns: minmax(0, 1fr) 96px 42px; }.task { align-items: flex-start; } }