/*
 * The signed-in partner portals — Operator (operator/…) and Agent (agent/…):
 * the blue left menu with round icons, the current page as a white tab joined
 * to the page, and the page's tabs, tables, cards and calendar. On phones the
 * menu becomes a scrolling strip above the page. Loaded by
 * OperatorPortal/Views/layout.php and AgentPortal/Views/layout.php.
 */
.op-shell{ display:grid; grid-template-columns:250px minmax(0,1fr); align-items:stretch; margin:8px 0 40px; }
.op-menu{ background:#0b4f9c; border-radius:26px 0 0 26px; padding:22px 0 26px 16px; color:#fff; position:relative; }
.op-menu__t{ font-style:italic; font-weight:600; font-size:24px; text-align:center; margin:0 16px 4px 0; letter-spacing:.2px; }
.op-menu__who{ font-size:12.5px; opacity:.8; text-align:center; margin:0 16px 18px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-menu ul{ list-style:none; margin:0; padding:0; }
.op-menu li{ position:relative; }
.op-menu__a{ display:flex; align-items:center; gap:12px; padding:13px 16px 13px 14px; color:#fff; font-weight:600; font-size:14.5px; text-decoration:none; border:0; background:transparent; width:100%; text-align:left; font-family:inherit; cursor:pointer; border-radius:30px 0 0 30px; }
.op-menu__a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.op-menu__i{ width:32px; height:32px; flex:0 0 32px; border:2px solid rgba(255,255,255,.9); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.op-menu li.is-active .op-menu__a{ background:#fff; color:#0b4f9c; }
.op-menu li.is-active .op-menu__i{ border-color:#0b4f9c; }
/* the white tab joins the page: curved corners above and below it */
.op-menu li.is-active::before, .op-menu li.is-active::after{ content:""; position:absolute; right:0; width:26px; height:26px; pointer-events:none; }
.op-menu li.is-active::before{ top:-26px; background:radial-gradient(circle at 0 0, transparent 25.5px, #fff 26px); }
.op-menu li.is-active::after{ bottom:-26px; background:radial-gradient(circle at 0 100%, transparent 25.5px, #fff 26px); }
.op-menu form{ margin:0; }
.op-main{ background:#fff; border-radius:0 26px 26px 0; box-shadow:0 12px 34px rgba(16,40,90,.10); padding:26px 28px 30px; min-width:0; }
.op-h{ font-size:22px; font-weight:700; margin:0 0 4px; color:#0f1d3a; }
.op-sub{ color:#6b7280; font-size:14px; margin:0 0 18px; }
.op-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.op-tabs a{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:1.5px solid #dfe5ee; color:#334155; font-size:13.5px; font-weight:600; text-decoration:none; background:#fff; }
.op-tabs a.is-on{ background:#0b4f9c; border-color:#0b4f9c; color:#fff; }
.op-tabs a .n{ background:rgba(0,0,0,.08); border-radius:999px; padding:0 7px; font-size:12px; }
.op-tabs a.is-on .n{ background:rgba(255,255,255,.22); }
.op-tabs--sm a{ padding:5px 12px; font-size:12.5px; }
.op-filter{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin:0 0 16px; }
.op-filter label{ font-size:12px; color:#6b7280; display:block; margin-bottom:3px; font-weight:600; }
.op-filter input, .op-filter select{ border:1.5px solid #dfe5ee; border-radius:10px; padding:7px 10px; font-size:13.5px; min-width:0; }
.op-filter .btn-bb{ padding:8px 16px; }
.op-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.op-table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.3px; color:#64748b; background:#f5f8fc; padding:10px 12px; border-bottom:1px solid #e5eaf2; white-space:nowrap; }
.op-table td{ padding:11px 12px; border-bottom:1px solid #eef2f7; vertical-align:top; }
.op-table tr:hover td{ background:#fafcff; }
.op-table .muted{ color:#8a94a6; font-size:12.5px; }
.op-table a{ font-weight:600; }
.op-pill{ display:inline-block; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:700; }
.op-pill--ok{ background:#e6f6ec; color:#1d7a46; } .op-pill--warn{ background:#fff4e0; color:#a15c00; } .op-pill--bad{ background:#fdecec; color:#b42318; } .op-pill--mute{ background:#eef2f7; color:#556070; }
.op-empty{ text-align:center; color:#6b7280; padding:40px 12px; border:1.5px dashed #dfe5ee; border-radius:16px; }
.op-empty i{ font-size:30px; display:block; margin-bottom:6px; color:#9aa7bb; }
.op-card{ border:1px solid #e5eaf2; border-radius:16px; padding:16px 18px; margin:0 0 16px; }
.op-card h2{ font-size:15px; font-weight:700; margin:0 0 10px; display:flex; gap:8px; align-items:center; }
.op-kv{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px 18px; }
.op-kv div span{ display:block; font-size:12px; color:#6b7280; } .op-kv div b{ font-weight:600; font-size:14px; word-break:break-word; }
.op-back{ display:inline-flex; gap:6px; align-items:center; font-size:13.5px; margin-bottom:10px; }
.op-form .bf-fld{ margin-bottom:12px; } .op-form .bf-fld input, .op-form .bf-fld textarea, .op-form .bf-fld select{ width:100%; }
.op-form textarea{ border:1.5px solid #dfe5ee; border-radius:12px; padding:10px 12px; font:inherit; font-size:14px; resize:vertical; }
.op-form textarea:focus{ outline:none; border-color:#0A7CFF; }
.op-cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.op-cal__h{ font-size:11.5px; color:#64748b; text-align:center; font-weight:700; }
.op-cal__d{ border-radius:10px; padding:6px 4px; text-align:center; font-size:12.5px; min-height:48px; border:1px solid #eef2f7; }
.op-cal__d b{ display:block; font-size:14px; } .op-cal__d small{ font-size:10.5px; }
.op-cal__d.s-sellable{ background:#e6f6ec; border-color:#bfe5cf; } .op-cal__d.s-enquiry{ background:#fff4e0; border-color:#f5d9a8; }
.op-cal__d.s-closed{ background:#eef2f7; } .op-cal__d.s-blocked{ background:#fdecec; border-color:#f3c9c4; } .op-cal__d.s-none{ background:#fff; color:#b6bdc9; }
.op-stars{ color:#f5a623; letter-spacing:1px; }
@media (max-width: 991.98px){
  .op-shell{ grid-template-columns:1fr; }
  .op-menu{ border-radius:20px 20px 0 0; padding:14px 10px 0; }
  .op-menu__t, .op-menu__who{ display:none; }
  .op-menu ul{ display:flex; overflow-x:auto; gap:4px; scrollbar-width:none; }
  .op-menu ul::-webkit-scrollbar{ display:none; }
  .op-menu__a{ flex-direction:column; gap:4px; font-size:12px; padding:8px 12px 10px; border-radius:16px 16px 0 0; white-space:nowrap; }
  .op-menu li.is-active::before, .op-menu li.is-active::after{ display:none; }
  .op-main{ border-radius:0 0 20px 20px; padding:18px 16px 22px; }
}
@media (max-width: 640px){
  .op-table thead{ display:none; }
  .op-table tr{ display:block; border:1px solid #e5eaf2; border-radius:14px; margin-bottom:10px; padding:4px 0; }
  .op-table td{ display:flex; justify-content:space-between; gap:12px; border:0; padding:6px 12px; text-align:right; }
  .op-table td::before{ content:attr(data-th); font-weight:600; color:#64748b; font-size:12px; text-align:left; }
  .op-cal{ gap:3px; } .op-cal__d{ min-height:40px; padding:4px 2px; }
}

/* ---- legacy-style list pages (agent/wallet-history, agent/recharge-requests):
   centred title with a rule, Show N entries + Search, a blue-headed striped table,
   "Showing x to y of z entries" and Previous / pages / Next — driven by portal-table.js ---- */
.pt-title{ text-align:center; font-size:24px; font-weight:800; margin:0 0 4px; color:#1f2937; }
.pt-title i, .pt-title .b{ color:#0b4f9c; }
.pt-rule{ width:135px; height:2px; background:#0b4f9c; margin:6px auto 20px; position:relative; }
.pt-rule::after{ content:""; position:absolute; left:50%; top:-2px; width:44px; height:6px; margin-left:-22px; background:#0b4f9c; border-radius:2px; }
.pt-bar{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px; margin:0 0 10px; font-size:14px; }
.pt-bar select, .pt-bar input{ border:1px solid #cfd6e2; border-radius:4px; padding:5px 8px; font-size:14px; background:#fff; }
.pt-bar select{ min-width:140px; }
.pt-bar input{ width:170px; }
.pt-bar label{ display:block; margin:0 0 3px; }
.pt-scroll{ overflow-x:auto; }
.pt-tbl{ width:100%; border-collapse:collapse; font-size:14px; min-width:720px; }
.pt-tbl th{ background:#0b4f9c; color:#fff; font-weight:700; text-align:left; padding:12px; border:1px solid #d7dde6; white-space:nowrap; }
.pt-tbl td{ padding:10px 12px; border:1px solid #d7dde6; vertical-align:top; }
.pt-tbl tbody tr:nth-child(odd) td{ background:#e7e9ec; }
.pt-tbl tbody tr:nth-child(even) td{ background:#f1f4f7; }
.pt-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 60px; margin-top:12px; font-size:14px; }
.pt-pg{ display:inline-flex; border:1px solid #d7dde6; border-radius:4px; overflow:hidden; }
.pt-pg button{ border:0; border-left:1px solid #d7dde6; background:#fff; color:#6b7280; padding:6px 12px; font-size:14px; cursor:pointer; }
.pt-pg button:first-child{ border-left:0; }
.pt-pg button.on{ background:#0a7cff; color:#fff; }
.pt-pg button:disabled{ cursor:default; opacity:.7; }
.pt-badge{ display:inline-block; border-radius:4px; padding:1px 6px; font-size:11px; font-weight:700; color:#fff; }
.pt-badge--pending{ background:#dc3545; } .pt-badge--done{ background:#28a745; } .pt-badge--rejected{ background:#6c757d; }
/* the two-way switches above the list (Offline | Online, Pending | Completed) */
.pt-switch{ display:flex; justify-content:center; margin:0 0 20px; }
.pt-switch div{ display:inline-flex; border:1.5px solid #9aa7bb; border-radius:999px; background:#fff; padding:2px; }
.pt-switch a{ position:relative; display:inline-flex; align-items:center; gap:5px; padding:7px 18px; border-radius:999px; font-weight:700; font-style:italic; font-size:13.5px; color:#1f2937; text-decoration:none; }
.pt-switch a.on{ background:#0b4f9c; color:#fff; }
.pt-switch a.on::after{ content:""; position:absolute; left:50%; bottom:-11px; margin-left:-9px; border:9px solid transparent; border-bottom:0; border-top-color:#0b4f9c; }
.pt-green{ background:#28a745; color:#fff; border:0; border-radius:4px; padding:8px 12px; font-weight:600; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.pt-green:hover{ background:#218838; color:#fff; }
.pt-red{ background:#dc3545; color:#fff; border:0; border-radius:4px; padding:8px 12px; font-weight:600; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.pt-red:hover{ background:#c82333; color:#fff; }
.pt-card{ background:#fff; border-radius:8px; box-shadow:0 1px 6px rgba(0,0,0,.35); padding:14px 12px 16px; }
.pt-form{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 24px; }
.pt-form label{ display:block; font-size:13px; margin:0 0 3px; color:#1f2937; }
.pt-form label i{ color:#0b4f9c; font-size:11px; } .pt-form .req{ color:#dc3545; }
.pt-form input, .pt-form select, .pt-form textarea{ width:100%; border:1px solid #cfd6e2; border-radius:4px; padding:7px 10px; font-size:14px; background:#fff; font-family:inherit; }
.pt-form .wide{ grid-column:1 / -1; }
.pt-form .ag-err{ font-size:12px; }
@media (max-width: 767.98px){ .pt-form{ grid-template-columns:1fr; } }

/* ---- agent/profile: three detail cards (Personal, Contact Person, Company/Agency) ---- */
.pf-card{ background:#fff; border-radius:8px; box-shadow:0 1px 6px rgba(0,0,0,.35); padding:14px 12px 18px; margin:0 0 10px; }
.pf-card .pt-title{ font-size:20px; }
.pf-card .pt-rule{ margin-bottom:14px; }
.pf-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 24px; }
.pf-l{ display:block; font-size:12.5px; font-weight:700; color:#1f2937; margin:0 0 2px; }
.pf-v{ font-size:13px; color:#1f2937; word-break:break-word; }
.pf-thumb{ display:inline-block; margin-top:4px; }
.pf-thumb img{ width:76px; height:40px; object-fit:cover; border-radius:2px; display:block; }
.pf-none{ color:#8a94a6; font-size:12.5px; }
.pf-view{ display:inline-block; background:#17a2b8; color:#fff; border-radius:3px; padding:0 5px; font-size:10px; font-weight:700; margin-left:4px; text-decoration:none; vertical-align:middle; }
.pf-view:hover{ color:#fff; background:#138496; }
.pf-card .pt-form{ gap:10px 24px; }
.pf-card .pt-form input[type=file]{ padding:4px 6px; }
@media (max-width: 767.98px){ .pf-grid{ grid-template-columns:1fr; } }

/* ---- agent/availability: package list with services, commission and Book Now ---- */
.pt-box{ background:#fff; border:1px solid #e3e7ee; border-radius:4px; padding:12px 12px 14px; }
.pt-teal{ display:inline-block; background:#17a2b8; color:#fff; border-radius:3px; padding:0 5px; font-size:10.5px; font-weight:700; line-height:1.5; }
.pt-book{ display:inline-flex; flex-direction:column; align-items:center; background:#17a2b8; color:#fff; border-radius:4px; padding:6px 12px; font-size:13.5px; text-decoration:none; line-height:1.3; }
.pt-book:hover{ background:#138496; color:#fff; }
.pt-book span{ white-space:nowrap; }
.pt-svc + .pt-svc{ margin-top:8px; }
.pt-svc small{ display:block; }

/* ---- agent/bookings: totals, four-way switch, status badges, boarding / dropping labels, sortable heads ---- */
.pt-switch--list a{ padding:6px 14px; font-size:12.5px; }
.pt-switch--list div{ flex-wrap:wrap; justify-content:center; }
.pt-nodata{ text-align:center; color:#dc3545; font-size:22px; margin:6px 0 0; }
.pt-total{ text-align:center; font-weight:700; font-size:17px; margin:0; }
.pt-total--g{ color:#28a745; } .pt-total--r{ color:#dc3545; margin-bottom:10px; }
.pt-bar--inline{ align-items:center; }
.pt-bar--inline label{ display:inline; }
.pt-bar--inline select{ min-width:0; }
.pt-tbl--bk{ min-width:980px; font-size:13.5px; }
.pt-tbl--bk td{ padding:12px 10px; }
.pt-ticket{ color:#0a7cff; font-weight:700; text-decoration:none; }
.pt-badge--part{ background:#ffc107; color:#212529; }
.pt-lbl-g{ color:#28a745; font-weight:700; } .pt-lbl-r{ color:#dc3545; font-weight:700; }
.pt-hr{ margin:8px 0; border:0; border-top:1px solid #c9d0da; opacity:1; }
.pt-tbl th[data-pt-sort]{ cursor:pointer; padding-right:22px; position:relative; }
.pt-tbl th[data-pt-sort]::after{ content:"\2191\2193"; position:absolute; right:6px; bottom:12px; font-size:11px; opacity:.45; letter-spacing:-2px; }
.pt-tbl th[aria-sort="ascending"]::after{ content:"\2191"; opacity:1; }
.pt-tbl th[aria-sort="descending"]::after{ content:"\2193"; opacity:1; }

/* ---- operator/availability: View More button, info left / pages right ---- */
.pt-view{ display:inline-flex; align-items:center; gap:5px; background:#17a2b8; color:#fff; border-radius:3px; padding:4px 9px; font-size:13px; font-weight:600; text-decoration:none; }
.pt-view:hover{ background:#138496; color:#fff; }
.pt-foot--split{ justify-content:space-between; }

/* ---- operator bulk enquiries: status buttons, action icons, cards, the small rich-text box ---- */
.pt-mv{ display:inline-block; white-space:nowrap; border:0; border-radius:3px; padding:1px 6px; font-size:10.5px; font-weight:700; color:#fff; cursor:pointer; margin:2px 0; font-family:inherit; }
.pt-mv--1{ background:#ffc107; color:#212529; } .pt-mv--2{ background:#28a745; } .pt-mv--3{ background:#dc3545; } .pt-mv--0{ background:#6c757d; }
.pt-ic{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:4px; color:#fff; font-size:14px; text-decoration:none; }
.pt-ic--v{ background:#0a7cff; } .pt-ic--e{ background:#28a745; }
.pt-ic:hover{ color:#fff; filter:brightness(.92); }
.pt-yellow{ display:inline-flex; white-space:nowrap; align-items:center; gap:5px; background:#ffc107; color:#212529; border-radius:4px; padding:7px 12px; font-size:13.5px; text-decoration:none; }
.pt-yellow:hover{ color:#212529; background:#e0a800; }
.pt-greenbadge{ display:inline-block; background:#28a745; color:#fff; border-radius:3px; padding:0 5px; font-size:10.5px; font-weight:700; text-decoration:none; }
.pt-greenbadge:hover{ color:#fff; }
.pt-teal-btn{ display:inline-flex; align-items:center; gap:5px; background:#17a2b8; color:#fff; border-radius:4px; padding:7px 14px; font-size:13.5px; text-decoration:none; margin-top:6px; }
.pt-teal-btn:hover{ color:#fff; background:#138496; }
.pt-back{ display:inline-flex; align-items:center; gap:4px; background:#dc3545; color:#fff; border-radius:4px; padding:5px 10px; font-size:13px; text-decoration:none; }
.pt-back:hover{ color:#fff; background:#c82333; }
.pt-sec{ background:#fff; border-radius:8px; box-shadow:0 1px 6px rgba(0,0,0,.35); padding:14px 12px 18px; margin:10px 0; }
.pt-sec .pt-title{ font-size:19px; }
.pt-sec .pt-rule{ margin-bottom:12px; }
.pt-rich{ font-size:14px; line-height:1.55; word-break:break-word; }
.pt-rich ul, .pt-rich ol{ padding-left:22px; }
.prte{ border:1px solid #cfd6e2; border-radius:4px; background:#fff; }
.prte-bar{ display:flex; flex-wrap:wrap; gap:2px; padding:5px 6px; background:#f5f6f8; border-bottom:1px solid #d7dde6; }
.prte-bar button{ width:30px; height:28px; border:0; background:transparent; border-radius:4px; color:#333; cursor:pointer; font-size:14px; }
.prte-bar button:hover{ background:#e2e6ec; }
.prte-bar .sep{ width:1px; background:#d7dde6; margin:3px 4px; }
.prte-area{ min-height:150px; padding:10px 12px; font-size:14px; outline:none; }
.prte-area:focus{ box-shadow:inset 0 0 0 2px rgba(10,124,255,.25); }
.pt-time{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.pt-time select{ border-radius:0; } .pt-time select:first-child{ border-radius:4px 0 0 4px; } .pt-time select:last-child{ border-radius:0 4px 4px 0; }

/* ---- operator feedback: the legacy "Tour Package Feedback" sheet ---- */
.fb-sheet{ max-width:760px; margin:0 auto; font-family:Arial, Helvetica, sans-serif; color:#111; }
.fb-sheet h1{ text-align:center; font-size:24px; font-weight:400; margin:0 0 4px; }
.fb-sheet .fb-rule{ width:70px; height:3px; margin:0 auto 16px; background:linear-gradient(90deg,#16a085 50%,#e67e22 50%); border-radius:2px; }
.fb-box{ display:grid; grid-template-columns:34% 66%; border:2px solid #111; border-radius:6px; margin:0 0 14px; box-shadow:0 2px 6px rgba(0,0,0,.25); overflow:hidden; }
.fb-box > .fb-h{ display:flex; align-items:center; justify-content:center; text-align:center; font-size:19px; font-weight:700; padding:10px; border-right:1px solid #111; }
.fb-h .t{ color:#16a085; } .fb-h .o{ color:#e67e22; }
.fb-rows > div{ padding:3px 6px; font-size:13.5px; border-bottom:1px solid #111; }
.fb-rows > div:last-child{ border-bottom:0; }
.fb-rows b{ display:block; }
@media (max-width: 575.98px){ .fb-box{ grid-template-columns:1fr; } .fb-box > .fb-h{ border-right:0; border-bottom:1px solid #111; } }
