:root{
    --navy:#050000;      /* THO brand black */
    --navy-2:#1c1c1c;    /* charcoal, for depth */
    --gold:#f5b700;      /* THO brand gold - Pantone 3514 C */
    --gold-light:#ffce3d;
    --gold-soft:#fff3cd;
    --bg:#f5f6f9;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#64748b;
    --green:#16803d;
    --green-bg:#e5f5ea;
    --amber:#b45309;
    --amber-bg:#fdf1e0;
    --red:#c0392b;
    --red-bg:#fbe9e7;
    --border:#e2e8f0;
    --radius:14px;
    --focus:#a16207;
    --dur:.18s;
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;overflow-x:hidden;}
  body{
    margin:0;
    font-family:'Cairo','Segoe UI', Tahoma, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;}
  .material-symbols-outlined{
    font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
    font-size:20px;line-height:1;vertical-align:middle;display:inline-block;
    user-select:none;
  }
  button,.cat-item,.ans-btn,.lang-toggle,.role-tab,.side-link,.chip,.bn-item,.assign-card,summary{cursor:pointer;}
  button:focus-visible, a:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
    outline:2.5px solid var(--focus); outline-offset:2px; border-radius:6px;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  .btn{
    border:none;border-radius:9px;padding:10px 16px;font-size:14px;font-weight:600;min-height:40px;
    cursor:pointer;transition:background var(--dur),border-color var(--dur),transform var(--dur);
    display:inline-flex;align-items:center;gap:6px;font-family:inherit;
  }
  .btn:active{transform:scale(0.97);}
  .btn .material-symbols-outlined{font-size:18px;}
  .btn-gold{background:var(--gold);color:#1c1300;}
  .btn-gold:hover{background:var(--gold-light);}
  /* .btn-outline defaults to a LIGHT-background outline style: nearly every call site (admin
     panels, drawers, the inspector checklist, the hotel dashboard's own logout button) sits on
     a white card or topbar, where the old white-text-on-a-near-white-border version rendered
     essentially invisible -- exactly what surfaced as "I can't find how to log out" on the
     hotel dashboard, but it affected buttons across every role. .btn-outline-invert restores
     the white-on-dark look for the one legitimate dark-background usage (the navy sidebar's
     own logout button). */
  .btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--border);}
  .btn-outline:hover{border-color:var(--navy);background:#eef1f8;}
  .btn-outline-invert{color:#fff;border-color:rgba(255,255,255,.45);}
  .btn-outline-invert:hover{border-color:#fff;background:rgba(255,255,255,.08);}
  .btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--border);}
  .btn-ghost:hover{background:#eef1f8;}
  .btn-primary{background:var(--navy);color:#fff;}
  .btn-primary:hover{background:var(--navy-2);}
  .btn-danger{background:var(--red-bg);color:var(--red);}
  .btn-danger:hover{background:#f6d5cf;}
  .btn-block{width:100%;justify-content:center;}
  .btn-sm{padding:8px 13px;font-size:12.5px;min-height:36px;}
  .btn:disabled{opacity:.45;cursor:not-allowed;}
  .btn:disabled:active{transform:none;}
  main{max-width:1180px;margin:0 auto;padding:26px 20px 60px;}
  .card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);padding:22px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* Tables keep their natural column widths and scroll sideways inside the card instead of
     squeezing text or blowing out the page width on narrow phone screens. */
  .card table{min-width:600px;}
  .grid{display:grid;gap:18px;}
  .hero{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:14px;}
  .hero h1{font-size:22px;margin:0 0 4px;}
  .hero p{margin:0;color:var(--muted);font-size:14px;}
  .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
  @media (max-width:768px){.stat-row{grid-template-columns:repeat(2,1fr);}}
  .stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;align-items:center;gap:12px;}
  .stat-ic-navy{background:var(--navy);color:#fff;}
  .stat-ic-green{background:var(--green-bg);color:var(--green);}
  .stat-ic-amber{background:var(--amber-bg);color:var(--amber);}
  .stat-ic-red{background:var(--red-bg);color:var(--red);}
  .stat .stat-ic{width:38px;height:38px;border-radius:10px;background:var(--gold-soft);color:#9a6d00;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .stat .num{font-size:24px;font-weight:800;color:var(--navy);line-height:1.1;}
  .stat .lbl{font-size:12px;color:var(--muted);margin-top:2px;}

  /* Hotel client-portal hero: branded banner (cover photo or brand gradient) + logo badge,
     replacing the old plain text page-head so the hotel's own identity is the first thing
     it sees on its dashboard, not a generic heading. */
  .hotel-hero{position:relative;border-radius:16px;overflow:hidden;margin-bottom:22px;min-height:130px;display:flex;align-items:flex-end;background:linear-gradient(135deg,var(--navy),var(--navy-2));}
  .hotel-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
  .hotel-hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,0,0,.82),rgba(5,0,0,.35) 60%,rgba(5,0,0,.15));}
  .hotel-hero-content{position:relative;padding:20px 22px;color:#fff;display:flex;align-items:center;gap:16px;width:100%;}
  .hotel-hero-logo{width:60px;height:60px;border-radius:14px;object-fit:cover;background:#fff;border:3px solid rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(0,0,0,.25);flex-shrink:0;}
  .hotel-hero-logo-empty{width:60px;height:60px;border-radius:14px;background:rgba(255,255,255,.14);border:3px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
  .hotel-hero-logo-empty .material-symbols-outlined{font-size:28px;}
  .hotel-hero-name{font-size:21px;font-weight:800;margin-bottom:5px;}
  .hotel-hero-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:#eee;}
  .hotel-hero-meta span{display:inline-flex;align-items:center;gap:5px;}
  .hotel-hero-meta .material-symbols-outlined{font-size:15px;color:var(--gold);}
  @media (max-width:640px){
    .hotel-hero{min-height:110px;}
    .hotel-hero-content{padding:14px 16px;gap:12px;}
    .hotel-hero-logo,.hotel-hero-logo-empty{width:48px;height:48px;border-radius:12px;}
    .hotel-hero-name{font-size:17px;}
  }
  table{width:100%;border-collapse:collapse;font-size:13.5px;}
  th,td{padding:13px 10px;text-align:start;border-bottom:1px solid var(--border);}
  th{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;}
  tr:hover td{background:#fafbfc;}
  .badge{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap;}
  .badge-green{background:var(--green-bg);color:var(--green);}
  .badge-amber{background:var(--amber-bg);color:var(--amber);}
  .badge-red{background:var(--red-bg);color:var(--red);}
  .badge-gray{background:#eef0f3;color:var(--muted);}
  .badge-gold{background:var(--gold-soft);color:#9a6d00;}
  .badge-blue{background:#e3eefc;color:#1d5fbf;}
  .badge-violet{background:#ece6fb;color:#5b3fc4;}
  .badge-orange{background:#ffe8d6;color:#b4500a;}
  .empty{padding:54px 20px;text-align:center;color:var(--muted);}
  .empty .big{width:56px;height:56px;border-radius:50%;background:var(--gold-soft);color:#9a6d00;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
  .empty .big .material-symbols-outlined{font-size:28px;}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media (max-width:700px){.form-grid{grid-template-columns:1fr;}}
  .field label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px;}
  .field .hint{font-size:11.5px;color:var(--muted);margin-top:4px;}
  .field input,.field select,.field textarea{
    width:100%;padding:11px 12px;border:1.5px solid var(--border);border-radius:9px;
    font-size:14px;background:#fff;color:var(--text);min-height:44px;font-family:inherit;
    transition:border-color var(--dur);
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
  .pw-field-wrap{position:relative;}
  .pw-field-wrap input{padding-inline-end:42px;}
  .pw-toggle-btn{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:4px;background:transparent;border:none;color:var(--muted);cursor:pointer;padding:8px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
  .pw-toggle-btn:hover{background:#eef0f3;color:var(--navy);}
  .pw-toggle-btn .material-symbols-outlined{font-size:19px;}
  select.mini{padding:8px 10px;border-radius:8px;border:1px solid var(--border);font-size:13px;font-family:inherit;min-height:38px;}

  /* ===== LOGIN ===== */
  .login-wrap{min-height:100vh;display:flex;align-items:stretch;background:var(--bg);}
  /* Brand panel is a single photo (with the logo/tagline already composited into the image
     itself) rather than live text over a gradient — simplest way to match the reference
     design exactly without trying to hand-recreate its typography/spacing in CSS. */
  .login-brand-panel{flex:1 1 46%;background-image:url('/login-brand.jpg');background-size:cover;background-position:center;}
  /* Old embedded logos are superseded by the new topbar logo (/logo-black.png) and the
     brand-panel photo (which already has the logo composited in) — hidden rather than
     removed from the markup, to avoid touching the large inline base64 image data. */
  .login-brand-panel .lb-content, .login-card .mono{display:none;}
  @media (max-width:860px){.login-brand-panel{display:none;}}
  .login-form-panel{flex:1 1 54%;display:flex;align-items:center;justify-content:center;padding:40px 24px;}
  .login-card{width:100%;max-width:520px;}

  .login-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:32px;}
  .login-topbar-brand{display:flex;align-items:center;gap:13px;}
  .login-topbar-brand img{height:46px;}
  .login-topbar-name{font-weight:800;font-size:16.5px;color:var(--navy);line-height:1.3;}
  .login-topbar-sub{font-size:12.5px;color:var(--muted);line-height:1.3;}
  .lang-pill{display:flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:20px;padding:8px 15px;font-size:12.5px;font-weight:700;color:var(--muted);background:#fff;font-family:inherit;cursor:pointer;}
  .lang-pill span.active{color:var(--gold-dark,#9a6d00);}
  .lang-pill .sep{color:var(--border);}

  .login-welcome{color:var(--gold-dark,#9a6d00);font-size:13px;font-weight:700;margin:0 0 6px;}
  .login-card h1{font-size:25px;margin:0 0 10px;font-weight:800;color:var(--navy);}
  .login-card h2{font-size:16px;margin:0 0 8px;color:var(--navy);font-weight:700;}
  .login-card .sub{color:var(--muted);font-size:13.5px;margin:0 0 24px;line-height:1.65;}

  .role-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;}
  .role-card{position:relative;border:1.5px solid var(--border);border-radius:16px;padding:22px 10px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:#fff;font-family:inherit;}
  .role-card:hover{border-color:#d8dbe0;}
  .role-card.active{border-color:var(--gold);background:#fffdf5;}
  .role-card-check{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.15);}
  .role-card-check .material-symbols-outlined{font-size:14px;}
  .role-card-icon{width:52px;height:52px;border-radius:12px;background:#f4f5f7;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--navy);}
  .role-card.active .role-card-icon{background:var(--gold-soft);color:var(--gold-dark,#9a6d00);}
  .role-card-icon .material-symbols-outlined{font-size:27px;}
  .role-card-title{font-weight:800;font-size:15px;color:var(--navy);margin-bottom:4px;}
  .role-card-desc{font-size:12px;color:var(--muted);line-height:1.45;}

  .field-icon-wrap{position:relative;margin-bottom:16px;}
  .field-icon-wrap .fi-icon{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:16px;color:var(--muted);pointer-events:none;}
  .field-icon-wrap .fi-icon .material-symbols-outlined{font-size:21px;}
  /* These login inputs sit in .field-icon-wrap, not .field, so they never picked up the shared
     .field input styling at all -- just bare browser default text inputs (no border, no
     radius, tiny). That's what actually made the login "gate" read as undersized, more than
     any single spacing value. Sized deliberately larger than the standard .field input (44px)
     since this is the one gate every user passes through first. */
  .field-icon-wrap input{
    width:100%;padding:15px 16px;padding-inline-start:46px;border:1.5px solid var(--border);
    border-radius:11px;font-size:15.5px;background:#fff;color:var(--text);min-height:54px;
    font-family:inherit;transition:border-color var(--dur),box-shadow var(--dur);
  }
  .field-icon-wrap input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
  .field-icon-wrap.pw-field-wrap input{padding-inline-end:46px;}

  .login-forgot{text-align:end;margin:-4px 0 18px;}
  .login-forgot a{font-size:12.5px;color:var(--gold-dark,#9a6d00);font-weight:700;cursor:pointer;}

  .login-error{background:var(--red-bg);color:var(--red);border-radius:9px;padding:10px 13px;font-size:13px;margin-bottom:14px;display:flex;gap:8px;align-items:center;}

  /* ===== ADMIN SHELL ===== */
  .admin-shell{display:flex;min-height:100vh;}
  .admin-sidebar{width:250px;flex-shrink:0;background:linear-gradient(180deg,var(--navy),var(--navy-2));color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40;}
  .admin-sidebar .side-brand{display:flex;align-items:center;gap:10px;padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.08);}
  .admin-sidebar .side-brand img{height:24px;}
  .side-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;}
  .side-section{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:#7c828f;font-weight:800;padding:14px 14px 6px;}
  .side-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;color:#c9c9c9;font-size:13.5px;font-weight:600;min-height:44px;transition:background .18s,color .18s;border:none;background:transparent;width:100%;text-align:start;font-family:inherit;}
  .side-link .material-symbols-outlined{font-size:20px;}
  .side-link:hover{background:rgba(255,255,255,.06);color:#fff;}
  .side-link.active{background:var(--gold);color:#1c1300;}
  .side-foot{padding:16px 20px;border-top:1px solid rgba(255,255,255,.08);}
  .side-user{display:flex;align-items:center;gap:10px;border-radius:8px;padding:6px;margin:-6px;transition:background .15s;}
  .side-user:hover{background:rgba(255,255,255,.06);}
  .avatar{width:36px;height:36px;border-radius:50%;background:var(--gold);color:#1c1300;font-weight:800;font-size:13.5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .avatar-sm{width:28px;height:28px;font-size:11px;}
  .side-user .su-name{font-size:12.5px;font-weight:700;color:#fff;}
  .side-user .su-role{font-size:11px;color:#9aa0ac;}
  .side-user-edit-ic{margin-inline-start:auto;color:#9aa0ac;display:flex;flex-shrink:0;}
  .side-user-edit-ic .material-symbols-outlined{font-size:16px;}
  .side-logout{margin-top:12px;}
  .admin-main{flex:1;min-width:0;display:flex;flex-direction:column;}
  .admin-topbar{background:#fff;border-bottom:1px solid var(--border);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;gap:12px;}
  .admin-topbar h1{font-size:18.5px;margin:0;display:flex;align-items:center;gap:10px;}
  .admin-topbar .tb-actions{display:flex;align-items:center;gap:10px;}
  .admin-content{padding:26px 28px 70px;max-width:1280px;width:100%;margin:0 auto;}
  .hamburger{display:none;background:transparent;border:none;color:var(--navy);cursor:pointer;padding:8px;border-radius:8px;}
  .hamburger:hover{background:#eef0f3;}
  @media (max-width:900px){
    .admin-sidebar{position:fixed;left:0;top:0;transform:translateX(-105%);transition:transform .25s;box-shadow:8px 0 30px rgba(0,0,0,.25);}
    html[dir=rtl] .admin-sidebar{left:auto;right:0;transform:translateX(105%);}
    .admin-sidebar.open{transform:translateX(0);}
    html[dir=rtl] .admin-sidebar.open{transform:translateX(0);}
    .hamburger{display:inline-flex;}
    .admin-content{padding:18px 16px 60px;}
    .admin-topbar{padding:14px 16px;}
  }
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:39;}
  .sidebar-backdrop.show{display:block;}
  .lang-toggle{background:transparent;border:1.5px solid var(--border);color:var(--navy);border-radius:20px;padding:8px 15px;font-size:12.5px;font-weight:700;min-height:38px;display:inline-flex;align-items:center;gap:6px;transition:background var(--dur);font-family:inherit;}
  .lang-toggle:hover{background:#eef0f3;}
  .lang-toggle.on-dark{border-color:rgba(255,255,255,.4);color:#fff;}
  .lang-toggle.on-dark:hover{background:rgba(255,255,255,.12);}

  .page-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:20px;}
  .page-head h2{margin:0;font-size:19px;}
  .page-head p{margin:3px 0 0;color:var(--muted);font-size:13px;}
  .toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
  .search-box{position:relative;flex:1;min-width:200px;}
  .search-box input{width:100%;padding:10px 14px 10px 38px;border:1.5px solid var(--border);border-radius:9px;font-size:13.5px;font-family:inherit;min-height:42px;}
  html[dir=rtl] .search-box input{padding:10px 38px 10px 14px;}
  .search-box .material-symbols-outlined{position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:19px;}
  .name-cell{display:flex;align-items:center;gap:10px;}
  .row-actions{display:flex;gap:6px;justify-content:flex-end;}
  .row-active{background:var(--gold-soft);}

  .logo-preview{width:64px;height:64px;border-radius:10px;border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fafafa;flex-shrink:0;}
  .logo-preview img{width:100%;height:100%;object-fit:contain;}
  .tpl-slot{border:1px solid var(--border);border-radius:10px;padding:14px;}
  .tpl-file{display:flex;align-items:center;gap:10px;}
  .placeholder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:10px;}
  .ph-chip{border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:12.5px;display:flex;flex-direction:column;gap:2px;}
  .ph-chip code{color:var(--navy);font-weight:700;background:var(--gold-soft);border-radius:5px;padding:1px 5px;width:fit-content;}
  .ph-chip span{color:var(--muted);}

  .photo-preview-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
  .photo-thumb{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--border);cursor:pointer;flex-shrink:0;}
  .photo-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;}
  .photo-lightbox img{max-width:100%;max-height:100%;border-radius:8px;object-fit:contain;}

  .hotel-account-box{border:1px solid var(--border);border-radius:10px;padding:12px;margin-top:10px;background:#fafafa;}
  .hotel-account-creds{background:var(--gold-soft);border-radius:8px;padding:10px;margin-top:8px;font-size:13px;}
  .hotel-account-creds .cred-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;}
  .hotel-account-creds .cred-row b{font-family:monospace;font-size:13.5px;}

  .hotel-logo-thumb{width:32px;height:32px;object-fit:contain;border-radius:6px;border:1px solid var(--border);background:#fff;flex-shrink:0;}
  /* Logo upload widget at the top of the Add/Edit Hotel drawer — a clickable preview square with
     a camera badge, plus explicit upload/remove buttons for discoverability (some users won't
     think to click the image itself). */
  .logo-upload-row{display:flex;align-items:center;gap:14px;margin-bottom:4px;}
  .logo-upload{position:relative;width:72px;height:72px;border-radius:16px;border:1.5px dashed var(--border);background:#f8f9fb;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;flex-shrink:0;transition:border-color .15s;}
  .logo-upload:hover{border-color:var(--gold);}
  .logo-upload img{width:100%;height:100%;object-fit:contain;background:#fff;}
  .logo-upload-empty{color:var(--muted);display:flex;}
  .logo-upload-empty .material-symbols-outlined{font-size:28px;}
  .logo-upload-badge{position:absolute;bottom:-2px;inset-inline-end:-2px;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);}
  .logo-upload-badge .material-symbols-outlined{font-size:13px;}
  .logo-upload-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
  .report-hotel-logo{max-width:120px;max-height:64px;object-fit:contain;margin-bottom:8px;}

  .icon-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;display:inline-flex;min-height:36px;min-width:36px;align-items:center;justify-content:center;}
  .icon-btn:hover{background:#eef0f3;color:var(--navy);}
  .icon-btn.danger:hover{background:var(--red-bg);color:var(--red);}
  @media (max-width:900px){
    /* .icon-btn's 36x36px base size is below the ~44px touch-target guideline -- fine with a
       mouse, but these are exactly the edit/delete/view row actions that get tapped constantly
       on a phone, so bump them up (and give row-actions a bit more breathing room) once we're
       in a touch-first layout. Must come AFTER the base .icon-btn rule above -- same
       specificity, so source order decides the winner regardless of the media query. */
    .icon-btn{min-height:44px;min-width:44px;padding:10px;}
    .row-actions{gap:2px;}
  }

  /* drawer */
  .drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:80;opacity:0;pointer-events:none;transition:opacity .2s;}
  .drawer-backdrop.show{opacity:1;pointer-events:auto;}
  .drawer{position:fixed;top:0;inset-inline-end:0;height:100vh;width:min(430px,92vw);background:#fff;z-index:81;transform:translateX(105%);transition:transform .25s;box-shadow:-8px 0 30px rgba(0,0,0,.2);display:flex;flex-direction:column;}
  html[dir=rtl] .drawer{transform:translateX(-105%);}
  .drawer.show{transform:translateX(0);}
  html[dir=rtl] .drawer.show{transform:translateX(0);}
  .drawer-head{padding:20px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
  .drawer-head h3{margin:0;font-size:16.5px;}
  .drawer-body{padding:20px 22px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:16px;}
  .drawer-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;flex-shrink:0;}

  /* ===== INSPECT LAYOUT (desktop / admin viewer) ===== */
  .inspect-layout{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start;}
  @media (max-width:1024px){.inspect-layout{grid-template-columns:1fr;}}
  .cat-list{position:sticky;top:20px;display:flex;flex-direction:column;gap:4px;}
  @media (max-width:1024px){.cat-list{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px;gap:8px;}}
  .cat-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;border:1.5px solid transparent;font-size:13.5px;font-weight:600;min-height:44px;transition:background var(--dur);white-space:nowrap;color:var(--text);background:#fff;}
  .cat-item .material-symbols-outlined{font-size:19px;color:#9a6d00;flex-shrink:0;}
  .cat-item.active .material-symbols-outlined{color:#fff;}
  .cat-item span.label{flex:1;}
  .cat-item:hover{background:#eef1f8;}
  .cat-item.active{background:var(--navy);color:#fff;border-color:var(--navy);}
  .cat-item .cnt{font-size:11px;font-weight:700;opacity:.8;background:rgba(0,0,0,.06);padding:2px 7px;border-radius:10px;}
  .cat-item.active .cnt{background:rgba(255,255,255,.18);}
  .progress-wrap{margin-bottom:16px;}
  .progress-bar-bg{background:#e4e7ee;border-radius:20px;height:9px;overflow:hidden;}
  .progress-bar-fill{background:linear-gradient(90deg,var(--gold),var(--gold-light));height:100%;transition:width .3s;}
  .item-row{padding:18px 0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start;}
  @media (max-width:640px){.item-row{grid-template-columns:1fr;}}
  .item-row:last-child{border-bottom:none;}
  .item-text{font-size:14.5px;line-height:1.55;}
  .item-tag{display:inline-block;margin-top:7px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:12px;color:#fff;letter-spacing:.2px;}
  .item-crit{color:var(--red);font-size:11.5px;font-weight:700;margin-inline-start:8px;display:inline-flex;align-items:center;gap:2px;vertical-align:middle;}
  .item-crit .material-symbols-outlined{font-size:14px;}
  .answer-group{display:flex;gap:8px;flex-shrink:0;}
  @media (max-width:640px){.answer-group{width:100%;}}
  .ans-btn{border:1.5px solid var(--border);background:#fff;border-radius:9px;padding:9px 14px;font-size:13px;font-weight:700;color:var(--muted);min-width:52px;min-height:44px;transition:background var(--dur),border-color var(--dur),color var(--dur);font-family:inherit;}
  @media (max-width:640px){.ans-btn{flex:1;}}
  .ans-btn:hover{border-color:var(--gold);}
  .ans-btn.yes.on{background:var(--green-bg);border-color:var(--green);color:var(--green);}
  .ans-btn.no.on{background:var(--red-bg);border-color:var(--red);color:var(--red);}
  .ans-btn.na.on{background:#eef0f3;border-color:var(--muted);color:var(--muted);}
  .note-input{grid-column:1/-1;width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;resize:vertical;min-height:36px;}
  .cat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
  .cat-header h2{margin:0;font-size:18px;}
  .cat-header .sub{font-size:12.5px;color:var(--muted);}
  .footer-nav{display:flex;justify-content:space-between;margin-top:22px;gap:10px;}

  /* ===== REPORT ===== */
  .report-letterhead{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:2px solid var(--gold);}
  .report-letterhead img{height:24px;width:auto;}
  .report-letterhead span{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
  .score-hero{display:flex;align-items:center;gap:26px;padding:26px;border-radius:var(--radius);background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;margin-bottom:22px;flex-wrap:wrap;}
  .score-circle{width:112px;height:112px;border-radius:50%;border:6px solid var(--gold);display:flex;align-items:center;justify-content:center;flex-direction:column;flex-shrink:0;background:rgba(255,255,255,.04);}
  .score-circle .n{font-size:30px;font-weight:800;}
  .score-circle .p{font-size:11px;opacity:.85;margin-top:2px;}
  .score-meta{flex:1;min-width:220px;}
  .score-meta h2{margin:0 0 6px;font-size:21px;}
  .score-meta .row{font-size:13.5px;color:#c9c9c9;margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .score-meta .row .material-symbols-outlined{font-size:16px;opacity:.8;}
  .grade-pill{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:7px 18px;border-radius:20px;font-weight:800;font-size:13px;}
  .grade-pill .material-symbols-outlined{font-size:16px;}
  .alert{display:flex;gap:12px;align-items:flex-start;background:var(--red-bg);border:1px solid #f0c2ba;color:var(--red);padding:15px 16px;border-radius:12px;margin-bottom:20px;font-size:13.5px;line-height:1.6;}
  /* On-screen base for the cover-page category scorecard (print gets a denser override below). */
  .cat-scoregrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:4px;}
  .csg-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:12.5px;}
  .csg-name{display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .csg-name .material-symbols-outlined{font-size:16px;color:#9a6d00;flex-shrink:0;}
  .csg-score{font-weight:800;flex-shrink:0;}
  .alert .material-symbols-outlined{font-size:22px;flex-shrink:0;}
  .charts-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px;}
  @media (max-width:800px){.charts-row{grid-template-columns:1fr;}}
  .chart-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
  .chart-card h3{margin:0 0 12px;font-size:14.5px;}
  .detail-cat{margin-bottom:12px;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
  .detail-cat summary{padding:14px 16px;cursor:pointer;font-weight:700;font-size:14px;background:#f8f9fb;display:flex;justify-content:space-between;align-items:center;list-style:none;gap:10px;min-height:44px;}
  .detail-cat summary .cs-left{display:flex;align-items:center;gap:10px;}
  .detail-cat summary .material-symbols-outlined{font-size:19px;color:#9a6d00;}
  .detail-cat summary::-webkit-details-marker{display:none;}
  .detail-item{padding:11px 16px;border-top:1px solid var(--border);font-size:13.5px;display:flex;justify-content:space-between;gap:10px;}
  .detail-item .note{color:var(--muted);font-size:12.5px;margin-top:3px;}
  .top-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
  /* Belt-and-suspenders hide for the dedicated PDF-export render mode (server drives this via
     Puppeteer with print media emulated already, but this keeps the on-screen chrome gone even
     if that mode is ever loaded outside of print emulation, e.g. for debugging). */
  .print-mode .no-print{display:none !important;}
  .exec-summary{background:#f8f9fb;border-inline-start:3px solid var(--gold);padding:12px 16px;border-radius:8px;font-size:13.5px;line-height:1.7;margin:0 0 18px;}

  /* ===== INSPECTOR APP (responsive: phone frame on mobile, wider app panel on tablet/laptop) =====
     The shell used to be hard-capped at max-width:480px with a thick phone-bezel border at every
     width above 640px, so on a tablet or laptop the whole inspector app (including document-style
     screens like the Standards Reference and submitted reports) still rendered as a tiny phone
     mockup instead of using the available screen space. Now it widens in two steps and swaps the
     heavy phone-bezel border for a lighter card treatment once it's clearly not phone-shaped. */
  .insp-app-outer{min-height:100vh;background:#e8eaee;display:flex;justify-content:center;padding:0;}
  @media (min-width:640px){.insp-app-outer{padding:32px 16px;align-items:flex-start;}}
  .insp-app{width:100%;max-width:480px;background:var(--bg);min-height:100vh;display:flex;flex-direction:column;position:relative;}
  /* Phone: unchanged — edge-to-edge, no card chrome. */
  /* Tablet (640-1023px): noticeably wider, light card look instead of a phone bezel. */
  @media (min-width:640px) and (max-width:1023px){
    .insp-app{max-width:720px;min-height:calc(100vh - 64px);border-radius:22px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.16);border:1px solid var(--border);}
  }
  /* Laptop/desktop (1024px+): wider still, and body content gets a readable max-width so text
     doesn't stretch edge-to-edge, while the topbar/bottom nav still span the full panel width. */
  @media (min-width:1024px){
    .insp-app{max-width:1040px;min-height:calc(100vh - 64px);border-radius:22px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.16);border:1px solid var(--border);}
    .insp-body{max-width:820px;margin:0 auto;width:100%;}
  }
  /* Bottom nav only has a couple of tabs — left as flex:1 it would stretch edge-to-edge on a wide
     panel and look sparse/broken, so keep its buttons at a comfortable width and center the group. */
  @media (min-width:640px){
    .insp-bottomnav{justify-content:center;gap:8px;}
    .insp-bottomnav .bn-item{flex:0 0 auto;min-width:120px;}
  }
  .insp-topbar{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
  .insp-topbar .it-left{display:flex;align-items:center;gap:10px;}
  .insp-topbar img{height:20px;}
  .insp-topbar .it-hello{font-size:11px;color:#c9c9c9;}
  .insp-topbar .it-name{font-size:13.5px;font-weight:700;}
  .insp-topbar .it-actions{display:flex;gap:4px;}
  .insp-topbar .icon-btn{color:#fff;}
  .insp-topbar .icon-btn:hover{background:rgba(255,255,255,.14);color:#fff;}
  .insp-body{flex:1;overflow-y:auto;padding:18px 16px 24px;}
  .insp-bottomnav{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--border);display:flex;flex-shrink:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));}
  .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:12px;color:var(--muted);font-size:10.5px;font-weight:700;min-height:48px;border:none;background:transparent;font-family:inherit;}
  .bn-item .material-symbols-outlined{font-size:22px;}
  .bn-item.active{color:#9a6d00;}
  .bn-item:active{transform:scale(.94);}

  .insp-hero{background:linear-gradient(135deg,var(--navy),var(--navy-2));border-radius:16px;color:#fff;padding:18px;margin-bottom:18px;}
  .insp-hero .ih-greet{font-size:12px;color:#c9c9c9;margin-bottom:4px;}
  .insp-hero .ih-name{font-size:19px;font-weight:800;margin-bottom:14px;}
  .insp-hero .ih-stats{display:flex;gap:10px;}
  .ih-stat{flex:1;background:rgba(255,255,255,.08);border-radius:12px;padding:10px;text-align:center;}
  .ih-stat .n{font-size:18px;font-weight:800;}
  .ih-stat .l{font-size:9.5px;color:#c9c9c9;margin-top:2px;}
  .section-label{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:22px 0 10px;}
  .section-label:first-child{margin-top:0;}

  .assign-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:15px;margin-bottom:13px;}
  .assign-card .ac-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:11px;}
  .assign-card .ac-name-wrap{display:flex;gap:11px;align-items:flex-start;flex:1;min-width:0;}
  .assign-card .ac-name{font-size:14.5px;font-weight:800;color:var(--navy);margin:0 0 3px;}
  .assign-card .ac-meta{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
  .assign-card .ac-meta .material-symbols-outlined{font-size:14px;}
  .ac-icon{width:42px;height:42px;border-radius:12px;background:var(--gold-soft);color:#9a6d00;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .ac-icon .material-symbols-outlined{font-size:21px;}
  .ac-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px;}
  .empty-mobile{text-align:center;padding:50px 20px;color:var(--muted);}
  .empty-mobile .material-symbols-outlined{font-size:44px;color:var(--gold);margin-bottom:10px;}

  .stepper-top{position:sticky;top:0;background:var(--bg);z-index:10;padding-bottom:8px;margin:-18px -16px 10px;padding-inline:16px;padding-top:14px;}
  .chip-row{display:flex;gap:8px;overflow-x:auto;padding:4px 0 4px;}
  .chip{flex-shrink:0;padding:8px 14px;border-radius:20px;background:#fff;border:1.5px solid var(--border);font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px;min-height:38px;font-family:inherit;}
  .chip.active{background:var(--navy);border-color:var(--navy);color:#fff;}
  .chip .material-symbols-outlined{font-size:15px;}
  .mobile-item{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px;}
  .mobile-item .mi-text{font-size:13.5px;line-height:1.55;margin-bottom:10px;}
  .mobile-item .answer-group{width:100%;}
  .mi-progress{font-size:11.5px;color:var(--muted);margin-bottom:2px;display:flex;justify-content:space-between;}
  .sticky-footnav{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--border);padding:12px 0 0;margin-top:14px;display:flex;gap:10px;}
  .profile-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;text-align:center;margin-bottom:16px;}
  .profile-card .avatar{width:64px;height:64px;font-size:22px;margin:0 auto 12px;}
  .profile-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);font-size:13px;}
  .profile-row:last-child{border-bottom:none;}
  .profile-row .pl{color:var(--muted);}
  .profile-row .pv{font-weight:700;color:var(--navy);}

  /* ===== REPORT: dual-mode + signature block ===== */
  .report-mode-tabs{display:flex;gap:8px;margin-bottom:18px;background:#eef0f3;padding:5px;border-radius:12px;max-width:420px;}
  .report-mode-tab{flex:1;padding:10px 14px;border-radius:9px;border:none;background:transparent;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;transition:background .18s,color .18s;}
  .report-mode-tab.active{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.12);}
  .report-mode-tab .material-symbols-outlined{font-size:17px;}
  .report-doc-title{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#9a6d00;margin-bottom:4px;}
  .report-meta-strip{display:flex;flex-wrap:wrap;gap:16px;background:#f8f9fb;border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:20px;font-size:12.5px;}
  .report-meta-strip .rm-item{display:flex;flex-direction:column;gap:2px;}
  .report-meta-strip .rm-label{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;}
  .report-meta-strip .rm-value{font-weight:700;color:var(--navy);}

  /* ===== REPORT COVER v2: gold/white theme matching the reference mockup exactly ===== */
  .bl-ar{display:block;font-family:'Cairo',sans-serif;}
  .bl-en{display:block;font-size:.82em;opacity:.75;font-weight:600;}
  .rc-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--gold);}
  .rc-header-brand{display:flex;align-items:center;gap:12px;}
  .rc-header-logo{height:44px;width:auto;flex-shrink:0;}
  .rc-header-wordmark{line-height:1.25;}
  .rc-wordmark-en{font-family:Georgia,'Times New Roman',serif;font-size:17px;font-weight:700;letter-spacing:.3px;color:var(--navy);}
  .rc-wordmark-tagline{font-size:8.5px;font-weight:700;letter-spacing:1.6px;color:var(--muted);text-transform:uppercase;margin-top:1px;}
  .rc-wordmark-ar{font-size:9.5px;color:var(--muted);font-family:'Cairo',sans-serif;margin-top:1px;}
  .rc-header-title{text-align:end;}
  .rc-title-ar{font-size:19px;font-weight:800;color:var(--navy);font-family:'Cairo',sans-serif;display:flex;align-items:center;gap:5px;justify-content:flex-end;}
  .rc-title-star{color:var(--gold);font-size:17px;}
  .rc-title-en{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.4px;margin-top:2px;}

  .rc-hero{display:flex;gap:0;margin-bottom:16px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
  .rc-hero-card{flex:1.35;display:flex;gap:16px;padding:18px 20px;background:#fff;flex-wrap:wrap;}
  .rc-hero-identity{flex:1;min-width:190px;}
  .rc-hero-hotel-logo{max-height:44px;max-width:130px;object-fit:contain;margin-bottom:8px;}
  .rc-hotel-name{font-size:20px;font-weight:800;color:var(--ink);line-height:1.25;margin-bottom:8px;}
  .rc-hero-row{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--text);line-height:1.6;margin-top:4px;}
  .rc-hero-row .material-symbols-outlined{font-size:15px;color:var(--gold);opacity:.9;margin-top:2px;}
  .rc-code-pill{display:inline-block;background:var(--navy);color:#fff;font-weight:700;font-size:10.5px;padding:1.5px 9px;border-radius:10px;letter-spacing:.3px;}
  /* A permanent, printed mark of formal committee sign-off on the report letterhead itself --
     unlike the on-screen workflow banners (which are UI-only and excluded from print/PDF), this
     travels with the report wherever it's viewed or exported, since that's the whole point: the
     client needs to see proof of approval, not just staff looking at the live dashboard. */
  .rc-approved-row .material-symbols-outlined{color:var(--green);}
  .rc-approved-badge{display:inline-block;background:var(--green-bg);color:var(--green);font-weight:700;font-size:10.5px;padding:1.5px 9px;border-radius:10px;letter-spacing:.3px;}
  .rc-hero-score{flex-shrink:0;text-align:center;min-width:130px;padding-inline-start:16px;border-inline-start:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;}
  .rc-score-lbl .bl-ar{font-size:11px;font-weight:700;color:var(--muted);}
  .rc-score-lbl .bl-en{font-size:8.5px;text-transform:uppercase;letter-spacing:.5px;}
  .rc-score-num{font-size:38px;font-weight:800;color:var(--ink);line-height:1.1;margin-top:4px;}
  .rc-stars{color:var(--gold);margin-top:4px;}
  .rc-stars .material-symbols-outlined{font-size:17px;}
  .rc-score-grade{font-size:11px;font-weight:700;color:var(--muted);margin-top:4px;}
  .rc-hero-photo{flex:1;min-width:200px;background:#eef0f3;display:flex;align-items:center;justify-content:center;}
  .rc-hero-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .rc-hero-photo-empty{color:var(--muted);}
  .rc-hero-photo-empty .material-symbols-outlined{font-size:44px;}
  /* On-screen mobile only (the print stylesheet already handles the exported-PDF case with its
     own, more aggressive compaction further down). .rc-hero has no flex-wrap, so its two
     children (.rc-hero-card and .rc-hero-photo, each with their own min-width) were forced
     side-by-side no matter how narrow the viewport got -- the combined minimum width easily
     exceeds a phone screen, causing horizontal scroll on the live (non-print) report view.
     Stacking them instead removes that hard floor. */
  @media (max-width:640px){
    .rc-hero{flex-direction:column;}
    .rc-hero-card{padding:14px;}
    .rc-hero-identity{min-width:0;}
    .rc-hero-score{min-width:0;border-inline-start:none;border-top:1px solid var(--border);padding-inline-start:0;padding-top:12px;margin-top:8px;width:100%;}
    .rc-hero-photo{min-width:0;min-height:140px;}
  }

  .rc-exec-summary{display:flex;align-items:flex-start;gap:12px;background:#fffaf0;border:1px solid var(--gold);border-radius:12px;padding:13px 18px;margin-bottom:18px;}
  .rc-exec-badge{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;}
  .rc-exec-badge .material-symbols-outlined{font-size:15px;}
  .rc-exec-summary .exec-summary{background:transparent;border:none;padding:0;margin:0;flex:1;}

  .rc-kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;}
  @media (max-width:700px){.rc-kpi-strip{grid-template-columns:repeat(2,1fr);}}
  .rc-kpi-card{background:#fff;border:1px solid var(--gold);border-radius:12px;padding:14px 10px;text-align:center;}
  .rc-kpi-ic{width:34px;height:34px;margin:0 auto 6px;border-radius:50%;background:var(--gold-soft);color:#9a6d00;display:flex;align-items:center;justify-content:center;}
  .rc-kpi-ic .material-symbols-outlined{font-size:18px;}
  .rc-kpi-ring{width:64px;height:64px;margin:0 auto 6px;border-radius:50%;border:4px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--ink);}
  .rc-kpi-num{font-size:22px;font-weight:800;color:var(--ink);line-height:1.15;}
  .rc-kpi-num-red{color:var(--red);}
  .rc-kpi-lbl{margin-top:5px;}
  .rc-kpi-lbl .bl-ar{font-size:10.5px;font-weight:700;color:var(--navy);}
  .rc-kpi-lbl .bl-en{font-size:8.5px;text-transform:uppercase;letter-spacing:.3px;}
  .rc-kpi-sub{margin-top:3px;font-size:9.5px;color:var(--muted);line-height:1.35;}

  .rc-key-areas{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:18px;}
  .rc-section-title{margin:0 0 12px;text-align:center;}
  .rc-section-title .bl-ar{font-size:14.5px;font-weight:800;color:var(--navy);}
  .rc-section-title .bl-en{font-size:10px;text-transform:uppercase;letter-spacing:.6px;}
  .rc-area-row{display:flex;align-items:center;gap:12px;padding:7px 0;}
  .rc-area-row + .rc-area-row{border-top:1px solid var(--border);}
  .rc-area-name{display:flex;align-items:center;gap:8px;width:190px;flex-shrink:0;}
  .rc-area-name .material-symbols-outlined{font-size:18px;color:var(--gold);flex-shrink:0;}
  .rc-area-name .bl-ar{font-size:12.5px;font-weight:700;}
  .rc-area-name .bl-en{font-size:9.5px;}
  .rc-area-bar{flex:1;height:9px;border-radius:5px;background:#f1e6cc;overflow:hidden;}
  .rc-area-bar-fill{height:100%;border-radius:5px;background:var(--gold);}
  .rc-area-score{width:42px;flex-shrink:0;text-align:end;font-weight:800;font-size:13px;color:var(--navy);}

  .rc-insight-title{position:relative;text-align:center;margin:4px 0 14px;}
  .rc-insight-title::before{content:'';position:absolute;top:50%;left:0;right:0;border-top:1px solid var(--border);}
  .rc-insight-title span{position:relative;background:#fff;padding:0 14px;}
  .rc-insight-title .bl-ar{font-size:14px;font-weight:800;color:var(--navy);}
  .rc-insight-title .bl-en{font-size:10px;text-transform:uppercase;letter-spacing:.6px;}
  .rc-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
  @media (max-width:800px){.rc-insights{grid-template-columns:1fr;}}
  .rc-insight-card{border-radius:12px;padding:14px 15px;font-size:11px;line-height:1.6;border:1px solid var(--border);background:#fff;}
  .rc-insight-head{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
  .rc-insight-badge{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .rc-insight-badge .material-symbols-outlined{font-size:15px;}
  .rc-badge-gold{background:var(--gold-soft);color:#9a6d00;}
  .rc-badge-red{background:var(--red-bg);color:var(--red);}
  .rc-insight-head .bl-ar{font-size:12.5px;font-weight:800;color:var(--navy);}
  .rc-insight-head .bl-en{font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);}
  .rc-insight-list{margin:0;padding-inline-start:16px;color:var(--text);}
  .rc-insight-list li{margin-bottom:5px;}
  .rc-insight-list li:last-child{margin-bottom:0;}
  .summary-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
  @media (max-width:700px){.summary-kpis{grid-template-columns:repeat(2,1fr);}}
  .full-detail-cat{margin-bottom:14px;border:1px solid var(--border);border-radius:12px;overflow:hidden;break-inside:avoid;page-break-inside:avoid;}
  .full-detail-cat .fc-head{padding:12px 16px;background:#f8f9fb;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:13.5px;border-bottom:1px solid var(--border);gap:10px;}
  .full-detail-cat .fc-head .cs-left{display:flex;align-items:center;gap:9px;}
  .full-detail-cat .fc-head .material-symbols-outlined{font-size:18px;color:#9a6d00;}
  .full-item-row{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:12.8px;}
  .full-item-row:last-child{border-bottom:none;}
  .full-item-row .fi-left{flex:1;min-width:0;}
  .full-item-row .fi-text{line-height:1.5;}
  .full-item-row .fi-note{color:var(--muted);font-size:11.5px;margin-top:3px;font-style:italic;}
  .full-item-row .fi-flag{color:var(--amber);background:var(--amber-bg);font-size:11px;font-weight:700;margin-top:5px;padding:3px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;}
  .full-item-row .fi-flag .material-symbols-rounded, .full-item-row .fi-flag .material-symbols-outlined{font-size:14px;}
  .full-item-row .fi-tag{display:inline-block;margin-top:5px;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:10px;color:#fff;letter-spacing:.2px;}
  .full-item-row .fi-badge{flex-shrink:0;}
  .sig-block{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-top:36px;padding-top:24px;border-top:1.5px dashed var(--border);flex-wrap:wrap;break-inside:avoid;page-break-inside:avoid;}
  .sig-col{flex:1;min-width:220px;}
  .sig-col.stamp-col{text-align:center;flex:0 0 auto;}
  .sig-col.stamp-col img{max-width:230px;height:auto;}
  .sig-label{font-size:14px;font-weight:700;color:var(--navy);letter-spacing:.2px;margin:8px 0 10px;}
  .sig-image{height:60px;display:block;margin-bottom:4px;}
  .sig-cursive{font-family:'Dancing Script',cursive;font-size:34px;color:var(--navy);line-height:1;margin-bottom:2px;}
  .sig-cursive.ar{font-family:'Aref Ruqaa',serif;font-size:30px;}
  .sig-blank{height:60px;}
  .sig-blank-admin{height:auto;display:flex;align-items:center;}
  .modal-overlay{position:fixed;inset:0;background:rgba(15,20,30,.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px;}
  .modal-card{background:#fff;border-radius:var(--radius);padding:22px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.25);}
  .modal-card .sigpad-wrap{border:1.5px dashed var(--border);border-radius:8px;background:#fafafa;}
  .modal-card #adminSigCanvas{width:100%;height:180px;display:block;touch-action:none;}
  /* standards reference document */
  .pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:8px;}
  @media (max-width:900px){.pillars-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.pillars-grid{grid-template-columns:1fr;}}
  .pillar-card{border:1px solid var(--border);border-radius:12px;padding:14px;background:#fbfbfc;}
  .pillar-dot{width:12px;height:12px;border-radius:50%;margin-bottom:8px;}
  .pillar-name{font-weight:800;font-size:13px;color:var(--navy);margin-bottom:5px;}
  .pillar-desc{font-size:11.5px;color:var(--muted);line-height:1.55;}
  .std-item-row{padding:9px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12.8px;}
  .std-item-row:last-child{border-bottom:none;}
  .std-item-text{flex:1;line-height:1.5;}
  .sig-line{border-top:1.5px solid var(--text);margin-top:8px;padding-top:7px;}
  .sig-name{font-weight:700;font-size:13px;color:var(--navy);}
  .sig-date{font-size:11px;color:var(--muted);margin-top:2px;}
  /* signature pad */
  .sigpad-wrap{background:#fff;border:1.5px dashed var(--border);border-radius:14px;padding:8px;margin:12px 0;}
  #sigCanvas{width:100%;height:180px;touch-action:none;border-radius:10px;background:#fbfbfc;display:block;}
  .sig-hint{font-size:12px;color:var(--muted);margin:0 0 12px;line-height:1.6;}
  /* Toast notification — a guaranteed-visible, self-dismissing confirmation banner, used
     instead of relying solely on native alert() for success messages like "password changed"
     (native alert() can be missed/dismissed quickly, especially on mobile). */
  .toast-wrap{position:fixed;top:18px;left:50%;transform:translateX(-50%) translateY(-16px);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:100%;max-width:420px;padding:0 14px;}
  .toast{pointer-events:auto;display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;padding:13px 18px;border-radius:12px;font-size:13.5px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(-10px);transition:opacity .25s ease,transform .25s ease;max-width:100%;}
  .toast.show{opacity:1;transform:translateY(0);}
  .toast.toast-success{background:var(--green);}
  .toast.toast-error{background:var(--red);}
  .toast .material-symbols-outlined{font-size:19px;}

  /* Print / PDF-export overrides -- kept last in the file on purpose: several base rules
     above (fi-tag, full-item-row, full-detail-cat, report-meta-strip, exec-summary...) set
     the same properties this block needs to override for print, and CSS resolves equal-
     specificity conflicts by source order, not by @media-query-ness. A rule declared later
     in the file always wins a tie, print block or not -- so this must physically be the last
     thing in the stylesheet or a later base rule will silently cancel parts of it (this bit
     us once already with page-break-inside; same mechanism, different property this time). */
  @media print{
    .no-print{display:none !important;}
    body{background:#fff;}
    .admin-shell,.insp-app-outer{display:block !important;}
    .admin-sidebar,.insp-topbar,.insp-bottomnav,.admin-topbar{display:none !important;}
    .admin-content{padding:0;max-width:100%;}
    /* The on-screen report lives inside a big white rounded "card" panel -- that reads as a UI
       widget, not a printed document. Strip it down to flat page content: no border, no shadow,
       no rounding, no padding of its own (the page margins from the PDF export already provide
       the margin). */
    .card,.chart-card{border:none;box-shadow:none;}
    .card{padding:0;border-radius:0;background:transparent;}
    .card > h3{display:none;}

    /* Dense report layout. Base size is 12px throughout; the goal is a document that reads like
       a real inspection report (LQA/Forbes-style) instead of a printed screenshot of the app --
       one flowing page, not a stack of separate boxed widgets with gaps between them. */
    body,.full-item-row,.detail-item,.exec-summary,.chart-card{font-size:12px;}

    /* ---- Letterhead: one slim branded rule at the very top, not its own boxed block ---- */
    .report-letterhead{display:flex;margin-bottom:6px;padding-bottom:5px;border-bottom:1.5px solid var(--gold);}
    .report-letterhead img{height:14px;}
    .report-letterhead span{font-size:9px;}

    /* ---- Header: hotel name + score + key facts as one compact flat strip, not a big padded,
       rounded gradient card. This is the single most-condensed part of the redesign since it
       used to be four stacked blocks (letterhead / hero / exec-summary / meta-strip) each with
       their own background and margins. ---- */
    .score-hero{padding:10px 14px;margin-bottom:8px;border-radius:6px;gap:14px;}
    .score-circle{width:52px;height:52px;border-width:3px;}
    .score-circle .n{font-size:15px;}
    .score-circle .p{font-size:6.5px;}
    .score-meta h2{font-size:15px;margin:0 0 2px;}
    .score-meta .row{font-size:10px;margin-top:2px;gap:4px;}
    .score-meta .row .material-symbols-outlined{font-size:12px;}
    .grade-pill{padding:2px 9px;font-size:9px;margin-top:4px;gap:4px;}
    .grade-pill .material-symbols-outlined{font-size:11px;}

    /* Every fact that used to live in the separate meta-strip box (property type, city,
       inspector, visit date, report date, reference) is already shown on the header rows above
       -- the boxed strip under it was pure duplication, so drop it instead of shrinking it. */
    .report-meta-strip{display:none !important;}

    /* ---- Critical alert: one slim line instead of a tall padded red panel ---- */
    .alert{padding:5px 10px;border-radius:6px;margin-bottom:8px;font-size:10.5px;line-height:1.4;gap:8px;}
    .alert .material-symbols-outlined{font-size:14px;}

    .exec-summary{margin:0 0 8px;padding:8px 12px;line-height:1.5;font-size:11.5px;}

    .charts-row{grid-template-columns:1fr 1fr !important;gap:8px;margin-bottom:8px;page-break-inside:avoid;}
    .chart-card{padding:6px 8px;page-break-inside:avoid;}
    .chart-card canvas{max-height:150px !important;}
    .chart-card h3{font-size:10px;margin:0 0 4px;}

    /* ---- Cover page: a real standalone executive-summary page. The detailed, item-by-item
       checklist starts fresh on its own page after this one instead of the first category
       flowing up into whatever space happened to be left under the charts. The per-category
       scorecard grid below gives this page genuine content (a real "at a glance" summary a
       manager can read in isolation) instead of it being mostly blank once the checklist moves
       off it. ---- */
    .report-cover-page{page-break-after:always;}
    .cat-scoregrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px 10px;margin-top:2px;}
    .csg-item{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:3px 8px;border:1px solid var(--border);border-radius:5px;font-size:9.5px;}
    .csg-name{display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .csg-name .material-symbols-outlined{font-size:11px;color:#9a6d00;flex-shrink:0;}
    .csg-score{font-weight:800;flex-shrink:0;}

    /* ---- Checklist rows: this is what needed to change most. Each row used to stack the
       criterion text, then the category tag on its own line below it, then any note/photo --
       three lines of vertical space for what is usually one short sentence. Laying the text and
       tag out as a single wrapping line (only actually wrapping to a 2nd line when the text is
       long) plus cutting the padding gets well over 20 rows on a page instead of ~9. ---- */
    .full-detail-cat{margin-bottom:0;border-inline:none;border-top:none;border-radius:0;overflow:visible;break-inside:auto;page-break-inside:auto;}
    .full-detail-cat + .full-detail-cat{border-top:2px solid var(--navy);}
    .fc-head{padding:4px 6px;font-size:11px;page-break-after:avoid;}
    .fc-head .material-symbols-outlined{font-size:13px;}
    /* Row: badge + text on ONE line. The per-row classification tag used to force a second
       line under every single item (a full-width sentence never leaves room for a pill next to
       it) -- that alone was the biggest cause of short pages. The row's left border (set inline
       per-item from the same classification color) carries that same information now, so the
       text pill is dropped from print entirely rather than shrunk. */
    .full-item-row{padding:2px 6px 2px 10px;gap:8px;page-break-inside:avoid;align-items:center;}
    .full-item-row .fi-left{display:block;}
    .full-item-row .fi-text{line-height:1.3;}
    .full-item-row .fi-tag{display:none;}
    .full-item-row .fi-note{font-size:9px;margin-top:0;}
    .full-item-row .fi-badge{padding:1.5px 8px;font-size:9px;}
    .full-item-row .photo-thumb{width:28px;height:28px;}
    .item-crit{font-size:9px;margin-inline-start:5px;}
    .item-crit .material-symbols-outlined{font-size:11px;}

    /* ---- Report cover v2 (gold/white mockup match): print-density versions. Same
       "shrink padding + font-size, keep every element" approach as the rest of this print
       block, so the cover stays a genuine one-page executive summary. ---- */
    .rc-header{margin-bottom:7px;padding-bottom:5px;border-bottom:1.5px solid var(--gold);}
    .rc-header-brand{gap:7px;}
    .rc-header-logo{height:22px;}
    .rc-wordmark-en{font-size:10.5px;}
    .rc-wordmark-tagline{font-size:5.5px;letter-spacing:.8px;}
    .rc-wordmark-ar{font-size:6.5px;}
    .rc-title-ar{font-size:12px;gap:3px;}
    .rc-title-star{font-size:11px;}
    .rc-title-en{font-size:6.5px;letter-spacing:.8px;}

    .rc-hero{margin-bottom:7px;border-radius:6px;}
    .rc-hero-card{padding:8px 10px;gap:8px;}
    .rc-hero-hotel-logo{max-height:22px;max-width:70px;margin-bottom:3px;}
    .rc-hotel-name{font-size:13px;margin-bottom:3px;}
    .rc-hero-row{font-size:8px;gap:4px;margin-top:2px;}
    .rc-hero-row .material-symbols-outlined{font-size:10px;}
    .rc-code-pill{font-size:7px;padding:1px 6px;}
    .rc-hero-score{min-width:70px;padding-inline-start:8px;}
    .rc-score-lbl .bl-ar{font-size:7px;}
    .rc-score-lbl .bl-en{font-size:5.5px;}
    .rc-score-num{font-size:20px;margin-top:2px;}
    .rc-stars{margin-top:2px;}
    .rc-stars .material-symbols-outlined{font-size:9px;}
    .rc-score-grade{font-size:6.5px;margin-top:2px;}
    .rc-hero-photo{min-width:90px;}
    .rc-hero-photo-empty .material-symbols-outlined{font-size:22px;}

    .rc-exec-summary{gap:6px;padding:6px 10px;margin-bottom:7px;border-radius:6px;}
    .rc-exec-badge{width:16px;height:16px;}
    .rc-exec-badge .material-symbols-outlined{font-size:9px;}

    .rc-kpi-strip{grid-template-columns:repeat(4,1fr) !important;gap:5px;margin-bottom:7px;}
    .rc-kpi-card{padding:6px 4px;border-radius:6px;}
    .rc-kpi-ic{width:20px;height:20px;margin-bottom:3px;}
    .rc-kpi-ic .material-symbols-outlined{font-size:11px;}
    .rc-kpi-ring{width:38px;height:38px;border-width:2.5px;font-size:9px;margin-bottom:3px;}
    .rc-kpi-num{font-size:13px;}
    .rc-kpi-lbl{margin-top:2px;}
    .rc-kpi-lbl .bl-ar{font-size:6.5px;}
    .rc-kpi-lbl .bl-en{font-size:5.5px;}
    .rc-kpi-sub{margin-top:1.5px;font-size:6px;}

    .rc-key-areas{padding:7px 10px;margin-bottom:7px;border-radius:7px;page-break-inside:avoid;}
    .rc-section-title{margin:0 0 5px;}
    .rc-section-title .bl-ar{font-size:9.5px;}
    .rc-section-title .bl-en{font-size:6.5px;}
    .rc-area-row{gap:6px;padding:2.5px 0;}
    .rc-area-name{width:120px;gap:4px;}
    .rc-area-name .material-symbols-outlined{font-size:11px;}
    .rc-area-name .bl-ar{font-size:8px;}
    .rc-area-name .bl-en{font-size:6.5px;}
    .rc-area-bar{height:5px;}
    .rc-area-score{width:26px;font-size:8px;}

    .rc-insight-title{margin:2px 0 7px;}
    .rc-insight-title span{padding:0 8px;}
    .rc-insight-title .bl-ar{font-size:9.5px;}
    .rc-insight-title .bl-en{font-size:6.5px;}
    .rc-insights{grid-template-columns:repeat(3,1fr) !important;gap:6px;margin-bottom:8px;page-break-inside:avoid;}
    .rc-insight-card{padding:6px 8px;border-radius:7px;font-size:7px;line-height:1.4;}
    .rc-insight-head{margin-bottom:4px;gap:4px;}
    .rc-insight-badge{width:15px;height:15px;}
    .rc-insight-badge .material-symbols-outlined{font-size:9px;}
    .rc-insight-head .bl-ar{font-size:8px;}
    .rc-insight-head .bl-en{font-size:6px;}
    .rc-insight-list{padding-inline-start:11px;}
    .rc-insight-list li{margin-bottom:2.5px;}
  }