:root{--navy:#102d50;--blue:#1669bc;--ink:#17314d;--muted:#718297;--line:#e3e9ef;--bg:#f3f6f9;--gold:#b98b49;--radius:18px}*{box-sizing:border-box}body{margin:0;font-family:'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}a{color:var(--blue)}h1,h2,h3,h4{font-family:'Segoe UI',Arial,sans-serif;margin:0;letter-spacing:-.04em}h1{font-size:32px;font-weight:800}h2{font-size:20px;font-weight:800}h3{font-size:16px;font-weight:800}p{line-height:1.7}button:focus-visible,a:focus-visible{outline:3px solid #7ebafb;outline-offset:3px}input:focus,textarea:focus,select:focus{outline:2px solid #91bdea;outline-offset:1px}.muted{color:var(--muted)}.small{font-size:12px}.eyebrow{font-size:10px;letter-spacing:.17em;text-transform:uppercase;font-weight:800;color:var(--muted)}.icon{width:20px;height:20px;display:inline-block;vertical-align:middle;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.test-strip{height:35px;display:flex;justify-content:center;align-items:center;gap:8px;background:#fff6e7;color:#82612b;border-bottom:1px solid #eee2cd;font-size:11px;letter-spacing:.01em;position:relative;z-index:2}.test-strip b{font-weight:800}.shell{display:grid;grid-template-columns:242px 1fr;min-height:calc(100vh - 35px)}.sidebar{background:var(--navy);color:white;padding:29px 20px 20px;display:flex;flex-direction:column;position:sticky;top:0;height:calc(100vh - 35px)}.brand{display:flex;align-items:center;gap:10px;padding:0 7px 32px}.brand-mark{width:41px;height:48px;object-fit:contain;filter:brightness(0) invert(1)}.brand strong{font-family:'Segoe UI',Arial,sans-serif;font-size:16px;letter-spacing:-.045em;line-height:1.25;display:block}.brand span{font-size:10px;color:#97b1ca}.nav-label{font-size:9px;letter-spacing:.2em;color:#819db8;padding:12px 13px 8px;text-transform:uppercase;font-weight:700}.nav-item{display:flex;align-items:center;gap:11px;width:100%;border:0;border-radius:10px;background:transparent;color:#bed0e1;padding:12px 13px;text-decoration:none;font-weight:500;font-size:13px;margin:3px 0;transition:background .15s}.nav-item:hover{background:#ffffff0c;color:white}.nav-item.active{background:#fff;color:var(--navy);font-weight:700;box-shadow:0 6px 20px #00172d22}.nav-item .count{margin-left:auto;background:#e8f0f9;padding:2px 6px;border-radius:5px;font-size:10px;color:var(--blue)}.sidebar-bottom{margin-top:auto;border-top:1px solid #ffffff14;padding:20px 8px 0;color:#a3b8cd;font-size:11px;line-height:1.65}.sidebar-bottom strong{color:white;display:block;font-size:12px}.workspace{min-width:0}.topbar{height:79px;border-bottom:1px solid var(--line);background:white;display:flex;align-items:center;justify-content:space-between;padding:0 40px;gap:12px}.breadcrumbs{font-size:12px;color:var(--muted)}.breadcrumbs span{color:var(--ink);margin-left:8px}.user-bar{display:flex;align-items:center;gap:11px}.avatar{border-radius:50%;display:grid;place-items:center;background:#e5eef7;color:#285b8b;width:35px;height:35px;font-size:11px;font-weight:800;flex-shrink:0}.user-bar strong{font-size:12px;display:block}.user-bar small{font-size:10px;color:var(--muted)}.icon-btn{display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;width:34px;height:34px;background:white;color:var(--muted)}main{padding:32px 40px 50px;max-width:1550px;margin:auto}.heading-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.heading-row p{color:var(--muted);margin:8px 0 0}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:10px 15px;min-height:39px;background:white;color:var(--ink);font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}.btn.primary{background:var(--blue);border-color:var(--blue);color:white;box-shadow:0 4px 8px #1669bc14}.btn.danger{color:#ab3f47;border-color:#f1d9dd;background:#fff}.btn.ghost{border-color:transparent;background:transparent;color:var(--blue);box-shadow:none}.btn.small{min-height:30px;padding:6px 10px;font-size:11px}.hero{padding:29px 32px;background:linear-gradient(110deg,#143956,#1b4c6b);border-radius:var(--radius);color:white;position:relative;overflow:hidden;margin-bottom:23px;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:181px}.hero:after{content:'';position:absolute;right:-15px;top:-90px;width:290px;height:290px;border:1px solid #ffffff14;border-radius:50%;box-shadow:0 0 0 43px #ffffff04,0 0 0 86px #ffffff03;pointer-events:none}.hero .eyebrow{color:#a5c7dd}.hero h1{font-size:29px;margin:10px 0}.hero p{color:#bccee0;max-width:540px;font-size:12px;margin:0}.hero-meta{text-align:right;position:relative;z-index:1;min-width:170px}.hero-meta strong{font-size:42px;font-family:'Segoe UI',Arial,sans-serif;font-weight:800}.hero-meta span{display:block;color:#bad0e2;font-size:11px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:30px}.stat{background:white;border:1px solid var(--line);border-radius:13px;padding:18px 20px;display:flex;align-items:center;gap:15px}.stat-icon{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;background:#edf4fb;color:var(--blue)}.stat:nth-child(2) .stat-icon{background:#f8f0e4;color:#aa7f40}.stat:nth-child(3) .stat-icon{background:#edf5f0;color:#4f856b}.stat b{font-family:'Segoe UI',Arial,sans-serif;font-size:25px;display:block;line-height:1.2}.stat span{font-size:11px;color:var(--muted)}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:26px 0 16px;gap:15px}.section-heading h2{font-size:18px}.section-heading p{margin:4px 0 0;font-size:12px;color:var(--muted)}.committee-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.committee-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:white;border:1px solid var(--line);border-radius:15px;padding:22px;transition:transform .18s,box-shadow .18s;min-height:219px}.committee-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px #17314d0c}.card-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 10%,white);color:var(--accent);margin-bottom:18px}.committee-card h3{font-size:16px}.committee-card p{font-size:11px;color:var(--muted);line-height:1.7;margin:8px 0 20px;flex:1}.card-footer{display:flex;align-items:center;gap:7px;padding-top:14px;border-top:1px solid #edf0f4;font-size:10px;color:var(--muted)}.card-footer b{color:var(--ink)}.card-footer .icon{margin-left:auto;width:16px}.pill{font-size:10px;font-weight:700;display:inline-flex;align-items:center;gap:4px;border-radius:5px;padding:4px 7px;background:#edf3f9;color:#426f9b;white-space:nowrap}.pill.green{background:#eaf5ee;color:#387e59}.pill.orange{background:#fff2df;color:#aa772c}.pill.red{background:#fbecee;color:#a34c52}.pill.gray{background:#f0f2f5;color:#7f8b99}.columns{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:24px}.panel{background:white;border:1px solid var(--line);border-radius:15px;overflow:hidden}.panel-header{padding:19px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:10px}.panel-header h2{font-size:16px}.panel-body{padding:22px}.task-row{padding:17px 22px;border-bottom:1px solid #edf0f4;display:flex;gap:13px;align-items:flex-start}.task-row:last-child{border:0}.task-state{width:20px;height:20px;border-radius:6px;border:1.5px solid #c7d5e2;display:grid;place-items:center;flex-shrink:0;margin-top:2px;color:#347b57}.task-state.done{background:#eaf5ee;border-color:#b3d8bf}.task-state.busy{border-color:#bc914b;background:#fff3df}.task-info{flex:1;min-width:0}.task-title{font-weight:700;font-size:12px;line-height:1.6;overflow-wrap:anywhere}.task-meta{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}.task-desc{white-space:pre-wrap;color:var(--muted);font-size:12px;line-height:1.7;margin:10px 0}.task-controls{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.empty{padding:36px 25px;text-align:center;color:var(--muted);line-height:1.8;font-size:12px}.empty .icon{display:block;margin:0 auto 12px;width:28px;height:28px;opacity:.5}.side-note{padding:23px;background:#edf2f7;border-radius:14px;border:1px solid #e1e8f0}.side-note h3{font-size:14px;margin:12px 0 7px}.side-note p{font-size:11px;color:var(--muted);margin:0}.list-links a{display:flex;align-items:center;justify-content:space-between;text-decoration:none;border-bottom:1px solid var(--line);padding:15px 0;font-size:12px;font-weight:600}.list-links a:last-child{border:0}.toolbar{display:flex;align-items:center;gap:10px;margin:20px 0;flex-wrap:wrap}.toolbar input{flex:1;min-width:180px}.toolbar input,.toolbar select{background:white;border:1px solid var(--line);padding:10px 12px;border-radius:9px;color:var(--ink);font-size:12px}.tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-bottom:24px}.tab{border:0;background:none;padding:15px 1px;font-size:12px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent}.tab.active{color:var(--blue);border-color:var(--blue)}.commission-banner{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;background:white;padding:24px 27px;display:flex;gap:18px;align-items:center}.commission-banner .card-icon{margin:0;width:53px;height:53px;flex-shrink:0}.commission-banner h1{font-size:26px}.commission-banner p{margin:6px 0 0;color:var(--muted);font-size:12px}.commission-banner .actions{margin-left:auto}.content-block{background:white;border:1px solid var(--line);border-radius:13px;padding:24px;margin-bottom:15px}.content-block .body-text{white-space:pre-wrap;line-height:1.9;font-size:13px;color:#4b637a;overflow-wrap:anywhere}.content-block header{display:flex;justify-content:space-between;gap:16px;margin-bottom:15px}.content-block footer{font-size:10px;color:var(--muted);margin-top:15px}.member-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.member-card{padding:24px;border:1px solid var(--line);border-radius:13px;background:white;display:flex;gap:13px;align-items:center}.member-card h3{font-size:13px}.member-card p{font-size:11px;margin:4px 0 0;color:var(--muted)}.user-table{width:100%;border-collapse:collapse;background:white;font-size:12px}.user-table th{text-align:left;padding:14px 20px;background:#f8fafc;font-size:9px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.09em}.user-table td{padding:18px 20px;border-top:1px solid var(--line);vertical-align:middle}.user-cell{display:flex;align-items:center;gap:12px}.user-cell strong{display:block;font-size:12px}.user-cell small{color:var(--muted);display:block;margin-top:4px;font-size:10px}.chips{display:flex;flex-wrap:wrap;gap:5px}.notice{padding:14px 18px;background:#edf4fb;border:1px solid #d9e7f5;border-radius:10px;font-size:12px;line-height:1.7;color:#416886;margin-bottom:22px}.notice.amber{background:#fff7e9;border-color:#f1e4cc;color:#92733c}.notice.error{background:#fff0f1;border-color:#f4d7db;color:#a64855}.modal-backdrop{position:fixed;inset:0;background:#0d233e80;backdrop-filter:blur(4px);z-index:20;display:flex;align-items:center;justify-content:center;padding:24px}.modal{background:#fff;border-radius:20px;width:620px;max-width:100%;max-height:90vh;overflow:auto;box-shadow:0 25px 80px #04172c33}.modal.wide{width:800px}.modal-header{padding:23px 27px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:white;z-index:2}.modal-header h2{font-size:20px}.modal-body{padding:25px 27px}.modal-footer{padding:18px 27px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;position:sticky;bottom:0;background:white}.field{display:block;margin-bottom:17px}.field>span{display:block;font-size:11px;font-weight:700;margin-bottom:7px}.field input,.field textarea,.field select{width:100%;padding:11px 12px;border:1px solid #d9e2ea;border-radius:8px;color:var(--ink);background:white;font-size:13px}.field textarea{min-height:110px;resize:vertical;line-height:1.6}.field small{display:block;color:var(--muted);font-size:10px;line-height:1.7;margin-top:5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.form-section{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}.form-section h3{margin:0 0 6px;font-size:14px}.form-section p{font-size:11px;color:var(--muted);margin:0 0 13px}.check{display:flex;align-items:flex-start;gap:9px;padding:9px 0;font-size:12px;line-height:1.6}.check input{width:16px;height:16px;accent-color:var(--blue);margin-top:2px;flex-shrink:0}.error-text{color:#a5414d;font-size:12px;line-height:1.6;margin-bottom:15px}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:35px 20px;background:radial-gradient(ellipse at top right,#dceaf4,transparent 60%),#f2f6fa}.login-card{width:460px;max-width:100%;border:1px solid var(--line);background:white;padding:38px;border-radius:22px;box-shadow:0 25px 70px #183d6710}.login-card h1{font-size:26px;text-align:center;margin:13px 0}.login-card>p{text-align:center;color:var(--muted);font-size:12px}.login-logo{height:74px;display:block;margin:0 auto 20px}.login-card .btn{width:100%}.demo-box{margin-top:25px;border-top:1px solid var(--line);padding-top:20px}.demo-box .btn{margin-top:7px;justify-content:flex-start}.demo-box small{display:block;margin-top:12px;font-size:10px;color:var(--muted);line-height:1.7}.outbox-mail{white-space:pre-wrap;font-family:inherit;font-size:12px;line-height:1.9;overflow-wrap:anywhere}.loading{padding:70px;text-align:center;color:var(--muted)}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--navy);color:white;padding:13px 22px;border-radius:10px;font-size:12px;box-shadow:0 8px 25px #17314d33;z-index:40;transition:transform .2s;max-width:90vw}#toast.show{transform:translateX(-50%) translateY(0)}.mobile-menu{display:none}.row-between{display:flex;justify-content:space-between;align-items:center;gap:15px}.test-switch{max-width:150px;font-size:10px;padding:7px;border:1px solid var(--line);border-radius:7px;background:#f8fafc;color:var(--muted)}.badge-dot{width:6px;height:6px;border-radius:50%;background:#579b72;display:inline-block}.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step{padding:24px;background:#fff;border:1px solid var(--line);border-radius:14px}.step .number{width:28px;height:28px;border-radius:50%;background:#eaf2fa;color:var(--blue);font-weight:800;display:grid;place-items:center;margin-bottom:15px}.step p{font-size:12px;color:var(--muted)}
@media(min-width:1500px){main{padding-top:40px}.hero{min-height:202px}}@media(max-width:1150px){.shell{grid-template-columns:210px 1fr}.sidebar{padding:25px 14px}.brand strong{font-size:14px}main{padding:27px}.topbar{padding:0 27px}.committee-grid{gap:12px}.committee-card{padding:18px}.columns{grid-template-columns:1.5fr 1fr}.user-table td,.user-table th{padding:14px 12px}.member-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.committee-grid{grid-template-columns:repeat(2,1fr)}.columns{grid-template-columns:1fr}.hero-meta{display:none}.stats{gap:10px}.stat{padding:15px;gap:9px}.stat-icon{width:32px;height:32px}.stat b{font-size:22px}.topbar{height:69px}.test-switch{max-width:110px}.user-table{min-width:660px}.table-scroll{overflow-x:auto}.help-grid{grid-template-columns:1fr}}@media(max-width:700px){.shell{display:block}.sidebar{display:none;position:fixed;z-index:10;top:35px;left:0;width:245px}.sidebar.open{display:flex;box-shadow:0 0 0 100vw #102d5066}.mobile-menu{display:grid}.topbar{padding:0 18px}.breadcrumbs{display:none}.user-bar strong{font-size:11px}.user-bar small{font-size:9px}.user-bar{gap:7px}.test-switch{max-width:98px}.topbar>.actions{gap:6px}main{padding:23px 18px 35px}.hero{padding:25px;min-height:190px}.hero h1{font-size:24px}.hero p{font-size:11px}.stats{grid-template-columns:1fr 1fr 1fr}.stat{padding:13px 10px;display:block}.stat-icon{display:none}.stat b{font-size:23px}.stat span{font-size:9px}.heading-row{align-items:flex-start;flex-wrap:wrap;gap:14px}h1{font-size:27px}.committee-grid{grid-template-columns:1fr}.committee-card{min-height:180px}.committee-card .card-icon{margin-bottom:12px}.member-grid{grid-template-columns:1fr}.commission-banner{padding:21px;align-items:flex-start;flex-wrap:wrap}.commission-banner .actions{margin-left:0;width:100%}.commission-banner h1{font-size:23px}.tabs{gap:16px}.tab{font-size:11px}.modal-backdrop{padding:10px}.modal{max-height:96vh;border-radius:14px}.modal-header{padding:19px}.modal-body{padding:20px}.modal-footer{padding:16px 20px}.form-grid{grid-template-columns:1fr}.task-row{padding:16px}.test-strip{font-size:9px;padding:0 8px}.test-strip .long{display:none}.login-card{padding:28px}.panel-header{padding:17px}.hero:after{right:-150px}}

/* Original club colours on a light masthead. */
.brand{background:linear-gradient(135deg,#fff,#e9f2fb);margin:-8px -8px 26px;padding:20px 13px;border-radius:16px;box-shadow:0 8px 24px #06172d30;border-bottom:4px solid #d6aa51;gap:12px;color:#103763}.brand-mark{width:60px;height:80px;filter:none;object-fit:contain}.brand span{color:#466987}.brand strong{font-size:17px;letter-spacing:-.025em}.assignee-row{display:flex;gap:12px;align-items:center}.assignee-row .field{flex:1}.rights-group{border:1px solid var(--line);border-radius:12px;margin:12px 0;padding:14px;background:#f8fafc}.rights-group summary{font-weight:700;cursor:pointer}.rights-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin-top:20px}.rights-grid .field span{font-size:13px}.modal.wide{max-width:900px}@media(max-width:650px){.rights-grid{grid-template-columns:1fr}.task-controls{flex-wrap:wrap}.brand{margin-top:0}}

.rights-checks{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:14px}.rights-checks .check{font-size:13px;align-items:flex-start}@media(max-width:650px){.rights-checks{grid-template-columns:1fr}}

/* Production layout has no environment banner. */
.shell{min-height:100vh}.sidebar{top:0;height:100vh}.workspace{min-height:100vh}


/* Mobile login screen only */
@media (max-width: 700px) {
  .login-wrap {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .login-card {
    width: 100%;
    max-width: 420px;
    min-width: 0;
    margin: 0 auto;
    padding: 26px 20px;
    overflow: hidden;
  }
  .login-card form,
  .login-card .field,
  .login-card input,
  .login-card button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .login-card h1 {
    max-width: 100%;
    font-size: clamp(20px, 6.2vw, 26px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .login-logo {
    height: 64px;
    max-width: 100%;
  }
}
@media (max-width: 360px) {
  .login-wrap { padding: 12px; }
  .login-card { padding: 22px 16px; }
}


/* Hide only the mobile dashboard title */
@media (max-width: 700px) {
  .phone-context > strong {
    display: none;
  }
}


/* Strict phone-width containment; desktop remains unchanged */
@media (max-width: 700px) {
  html, body, #app, .shell, .workspace {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  .shell { display: block; }
  .workspace, .workspace > main, .topbar {
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
  }
  .workspace > main {
    margin: 0;
    padding-left: 14px;
    padding-right: 14px;
    overflow-x: hidden;
  }
  .workspace > main > *, .heading-row, .hero, .stats,
  .section-heading, .committee-grid, .committee-card,
  .columns, .panel, .content-block, .phone-quick {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .committee-grid, .columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .committee-card, .committee-card * {
    min-width: 0;
    max-width: 100%;
  }
  .committee-card h3, .committee-card p, .card-footer,
  .task-title, .task-meta {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .phone-quick a {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .phone-quick a > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .stat { min-width: 0; }
  img, svg, iframe { max-width: 100%; }
}


/* Clean mobile top bar; desktop remains unchanged */
@media (max-width: 700px) {
  .topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 0 14px;
    overflow: hidden;
  }

  .topbar .mobile-portal-title {
    display: none !important;
  }

  .topbar .mobile-menu {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
  }

  .topbar .phone-context {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  .topbar .phone-context > span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar .phone-context > strong {
    display: none !important;
  }

  .topbar .user-bar {
    margin-left: auto;
    flex: 0 0 auto;
  }

  .topbar .user-bar > div:not(.avatar),
  .topbar .user-bar > .icon-btn {
    display: none !important;
  }

  .topbar .avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }
}


/* Repair mobile management rows only */
@media (max-width: 700px) {
  .panel > .task-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    padding: 16px;
  }

  .panel > .task-row > .card-icon {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
    margin: 0 !important;
  }

  .panel > .task-row > .task-info {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  .panel > .task-row > .task-info h3,
  .panel > .task-row > .task-info b,
  .panel > .task-row > .task-info .task-meta {
    width: auto;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .panel > .task-row > .actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  .panel > .task-row > .actions .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .panel > .task-row > .actions .btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}


/* Restore polished mobile bottom navigation only */
@media (max-width: 700px) {
  .workspace > main {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 30;
    width: auto;
    max-width: none;
    padding: 6px;
    border: 1px solid #e1e7ef;
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 28px rgba(21, 46, 75, 0.14);
    backdrop-filter: blur(14px);
    overflow: hidden;
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 54px;
    padding: 5px 2px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: #76889b;
    text-decoration: none;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.15;
  }

  .mobile-bottom-nav .icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .mobile-bottom-nav [aria-current="page"] {
    background: #123c61;
    color: #fff;
  }

  .mobile-bottom-nav a:active,
  .mobile-bottom-nav button:active {
    transform: scale(0.97);
  }

  .phone-nav-count {
    position: absolute;
    top: 2px;
    right: calc(50% - 25px);
    min-width: 17px;
    padding: 1px 4px;
    border: 2px solid #fff;
    border-radius: 9px;
    background: #dceafa;
    color: #155c9a;
    font-size: 9px;
    line-height: 15px;
  }

  .mobile-bottom-nav [aria-current="page"] .phone-nav-count {
    background: #fff;
    color: #123c61;
  }

  body:has(.modal-backdrop) .mobile-bottom-nav,
  body.mobile-typing .mobile-bottom-nav,
  body.mobile-keyboard .mobile-bottom-nav {
    display: none;
  }
}


/* Keep mobile drawer usable and logout accessible */
@media (max-width: 700px) {
  body.mobile-drawer-open .mobile-bottom-nav {
    display: none !important;
  }

  .sidebar.open {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .sidebar.open .phone-account {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-top: 20px;
    padding: 18px 4px 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .sidebar.open .phone-account > div:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sidebar.open .phone-account strong,
  .sidebar.open .phone-account small {
    display: block;
    color: #fff;
  }

  .sidebar.open .phone-account small {
    margin-top: 2px;
    color: #b9cbe0;
  }

  .sidebar.open .phone-account .btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 9px 12px;
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
}


/* Simple mobile logout row */
@media (max-width: 700px) {
  .sidebar.open .phone-account {
    display: block;
    margin-top: 20px;
    padding: 18px 0 6px;
  }

  .sidebar.open .phone-account > .avatar,
  .sidebar.open .phone-account > div:not(.avatar) {
    display: none !important;
  }

  .sidebar.open .phone-account .btn {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
  }
}

/* Desktop header cleanup. Phone presentation is unchanged. */
@media(min-width:701px){
  .mobile-drawer-close,.mobile-portal-title,.mobile-shade,.mobile-bottom-nav,
  .phone-context,.phone-account,.phone-quick,.phone-nav-count{display:none!important}
  .topbar{min-width:0;overflow:hidden}
  .topbar .breadcrumbs{min-width:0;line-height:1.5}
  .topbar>.actions{margin-left:auto;flex-shrink:0}
  .sidebar .brand{align-items:center;gap:12px;background:#fff;border:1px solid #dce6ef;border-bottom:3px solid #c9a35b;box-shadow:0 5px 16px #06172d16;border-radius:14px}
  .sidebar .brand-mark{display:block;width:56px;height:76px;flex:0 0 56px;object-fit:contain;filter:none}
  .sidebar .brand>div{min-width:0}
  .sidebar .brand strong{font-size:16px;line-height:1.25}
  .sidebar .brand span{display:block;margin-top:6px;font-size:10px;line-height:1.6}
}

.member-presence{display:block!important;line-height:1.6;overflow-wrap:anywhere;color:var(--muted);font-size:12px}.member-presence.is-online{color:#24804c}.presence-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2baa65;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 3px #2baa6514}


/* Responsive portal fit: phone and touch tablets */
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1366px) {
  html, body, #app {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  .shell,
  .workspace,
  .workspace > main,
  .topbar {
    min-width: 0;
    max-width: 100%;
  }

  .workspace {
    overflow-x: clip;
  }

  .workspace > main {
    width: 100%;
    padding-inline: clamp(18px, 3vw, 36px);
  }

  .workspace > main > *,
  .heading-row,
  .section-heading,
  .hero,
  .stats,
  .committee-grid,
  .committee-card,
  .columns,
  .panel,
  .content-block,
  .task-row,
  .phone-quick {
    min-width: 0;
    max-width: 100%;
  }

  .hero h1,
  .hero p,
  .section-heading h2,
  .section-heading p,
  .committee-card h3,
  .committee-card p,
  .task-row strong,
  .task-row span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  img, svg, video, canvas {
    max-width: 100%;
  }

  .committee-grid,
  .columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body,
  #app,
  .shell,
  .workspace {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  .shell {
    display: block !important;
  }

  .workspace > main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-inline: 14px !important;
    overflow-x: clip !important;
  }

  .workspace > main > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .topbar {
    width: 100% !important;
    padding-inline: 14px !important;
    gap: 10px;
  }

  .hero {
    width: 100% !important;
    min-height: 0;
    padding: 26px 22px !important;
    border-radius: 24px;
    overflow: hidden;
  }

  .hero h1 {
    font-size: clamp(1.85rem, 8.2vw, 2.55rem) !important;
    line-height: 1.08;
  }

  .hero p {
    font-size: 1rem !important;
    line-height: 1.55;
  }

  .phone-quick {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    overflow: hidden;
  }

  .phone-quick > *,
  .phone-quick a {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .stat {
    min-width: 0 !important;
    width: auto !important;
    padding: 16px 12px !important;
  }

  .stat strong {
    font-size: clamp(1.65rem, 8vw, 2.2rem);
  }

  .stat span {
    display: block;
    font-size: .82rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .section-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
  }

  .section-heading > * {
    min-width: 0;
  }

  .section-heading > a,
  .section-heading > .btn {
    width: auto !important;
    max-width: 100% !important;
    justify-self: end;
    white-space: normal;
    text-align: right;
  }

  .committee-grid,
  .columns {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 14px !important;
  }

  .committee-card,
  .panel,
  .content-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .committee-card {
    padding: 20px !important;
  }

  .committee-card > *,
  .panel > *,
  .content-block > * {
    min-width: 0;
    max-width: 100%;
  }

  .row-between,
  .actions,
  .heading-row {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  table {
    max-width: 100%;
  }
}

@media (min-width: 701px) and (max-width: 1024px),
       (pointer: coarse) and (min-width: 701px) and (max-width: 1366px) {
  .shell {
    width: 100%;
    max-width: 100vw;
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
    overflow-x: clip;
  }

  .workspace > main {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .committee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Commissieonderdelen blijven op telefoons allemaal zichtbaar. */
@media (max-width: 700px) {
  .commission-banner .actions { display: flex; gap: 8px; }
  .commission-banner .actions .btn { flex: 1 1 auto; }
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; width: 100%; }
  .tab { min-width: 0; text-align: center; white-space: normal; font-size: 14px; line-height: 1.3; }
}

.social-recipient-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.social-recipient{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:16px}.social-recipient input{width:18px;height:18px;flex-shrink:0}.social-recipients{border:0;padding:0;margin:20px 0}.social-recipients legend{font-weight:700;font-size:16px}.social-meta{font-size:15px;margin:12px 0;color:var(--muted);overflow-wrap:anywhere}.social-plan header{gap:16px}.social-plan h3{overflow-wrap:anywhere}.social-plan .actions{flex-wrap:wrap}@media(max-width:600px){.social-recipient-grid{grid-template-columns:1fr}.social-plan header{flex-wrap:wrap}}

.social-bulk{margin:16px 0;align-items:center;gap:16px;flex-wrap:wrap}.social-bulk label,.social-select{display:flex;align-items:center;gap:8px}.social-select{font-size:13px;color:var(--muted);margin-bottom:10px}

/* Portal refresh: clearer hierarchy, readable controls and direct navigation. */
:root{--blue:#2465df;--ink:#18304d;--muted:#60738b;--line:#e1e8f1;--bg:#f5f7fb;--radius:16px}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:inherit;letter-spacing:-.025em}h1{font-size:30px}h2{font-size:21px}.small,.task-meta{font-size:13px}
.sidebar{background:linear-gradient(165deg,#122e50,#163958);}.brand{box-shadow:none;border-bottom:2px solid #d6aa51;border-radius:14px}.nav-item{font-size:14px;min-height:44px}.nav-item.active{box-shadow:0 4px 16px #06172d24}
.hero{min-height:160px;padding:28px 32px;background:linear-gradient(120deg,#183b60,#285771);border-radius:20px}.hero h1{font-size:30px}.hero p{font-size:14px;max-width:620px}.hero-meta strong{font-size:32px}.hero-meta span{font-size:12px}.stats{gap:16px}.stat{border:1px solid var(--line);box-shadow:0 3px 14px #16395804}
.panel,.content-block,.committee-card,.member-card{border:1px solid var(--line);box-shadow:0 3px 14px #16395805;border-radius:16px}.committee-card{min-height:170px;transition:box-shadow .18s,border-color .18s}.committee-card:hover{border-color:#a9c2ec;box-shadow:0 8px 24px #16395812}.committee-card p{font-size:14px;line-height:1.6}.committee-card .card-meta{font-size:13px}
.btn{min-height:42px;border-radius:10px;font-size:14px;font-weight:650}.btn.small{min-height:38px;font-size:13px}.btn.primary{background:#2465df;box-shadow:0 3px 8px #2465df20}.btn.primary:hover{background:#1c53bb}.icon-btn{min-width:40px;min-height:40px}.toolbar{gap:12px;flex-wrap:wrap}.toolbar input,.toolbar select{min-height:44px;border-radius:10px;font-size:15px}.toolbar input{flex:1 1 220px}.toolbar select{flex:0 1 auto}
.tabs{gap:6px;padding:6px;border:1px solid var(--line);border-radius:12px;background:#eaf0f7;margin:20px 0 26px;display:flex;flex-wrap:wrap}.tab{border:0!important;padding:12px 16px;font-size:14px;border-radius:8px}.tab.active{background:white;color:#185bc9;box-shadow:0 2px 5px #17314d10}.tab:hover{background:#ffffffa8}
.quick-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 30px}.quick-links a{display:flex;align-items:center;gap:12px;padding:18px;background:white;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);font-weight:700}.quick-links a:hover{border-color:#90b1ea;background:#fafdff}.quick-links a>span{flex:1}.quick-links small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:4px;line-height:1.5}.quick-links a>.icon:first-child{color:var(--blue)}
.planning-summary{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.planning-summary span{padding:10px 16px;background:#eaf0fa;border:1px solid #dce6f5;border-radius:10px;color:#405877}.planning-summary b{color:var(--ink);margin-right:4px}.social-plan .actions{padding-top:14px;border-top:1px solid var(--line)}.social-bulk{background:#fff;padding:14px 16px;border:1px solid var(--line);border-radius:12px}.pill.overdue{background:#fff0ef;color:#ad3530}.modal{box-shadow:0 24px 80px #102d5033}.field input,.field select,.field textarea{border-radius:10px}.social-recipient:has(input:checked){background:#eef4ff;border-color:#83a9ed}.task-desc{font-size:14px;line-height:1.65}input[type=checkbox]{accent-color:var(--blue)}
@media(max-width:700px){main{padding:20px 16px 32px}.hero{min-height:0;padding:24px}.hero h1{font-size:25px}.hero p{font-size:14px}.hero-meta{display:none}.quick-links{grid-template-columns:1fr;gap:10px}.quick-links a{padding:16px}.tabs{display:flex;gap:4px}.tab{flex:1 1 auto;text-align:center;padding:12px 10px;font-size:13px}.toolbar input,.toolbar select{width:100%;flex:1 1 100%}.social-plan header{align-items:flex-start}.social-plan .actions .btn{flex:1 1 120px}.social-bulk{gap:12px}.social-bulk .btn{margin-left:auto}.commission-banner{padding:20px}.stat span{font-size:11px}.btn{min-height:44px}.btn.small{min-height:40px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.btn[data-action^="delete"],.btn[data-action="cancel-social"]{color:#a33c43;border-color:#efd9dc;background:#fff8f8}.btn[data-action^="delete"]:hover{background:#ffeded}.mobile-bottom-nav{box-shadow:0 -4px 24px #1639580d}.mobile-bottom-nav a[aria-current="page"]{color:#2465df;background:#edf3ff;border-radius:12px}.social-select input,.social-bulk input{width:20px;height:20px}.modal-header{background:#fbfcff;border-bottom:1px solid var(--line)}.modal-footer{background:#fbfcff}.member-card{gap:16px}.member-card h3{font-size:16px}.member-card p{font-size:14px}
@media(max-width:700px){input,select,textarea,.field input,.field select,.field textarea{font-size:16px!important}.login-card{border-radius:20px}.content-block{padding:20px}.rights-group{padding:16px}.rights-checks .check{font-size:15px;min-height:44px}.modal{border-radius:18px;max-height:calc(var(--mobile-viewport,100dvh) - 20px)}.modal-header h2{font-size:20px}.modal-body{padding:20px}.modal-footer .btn{flex:1}.planning-summary span{flex:1 1 100px}.phone-context strong{font-size:15px}.mobile-bottom-nav a,.mobile-bottom-nav button{min-height:52px}}

.user-table tr[hidden]{display:none!important}@media(min-width:1100px){.user-table td:last-child{width:250px}.user-table td .actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:7px}.user-table td{padding-top:18px;padding-bottom:18px}}
/* Agenda, documenten en persoonlijke aandachtspunten */
.attention-preview{padding:22px;margin:24px 0}.attention-preview .section-heading{margin:0 0 12px}.attention-row{display:flex;align-items:center;gap:14px;padding:16px 20px;text-decoration:none;color:var(--text);border-bottom:1px solid var(--line)}.attention-row:last-child{border-bottom:0}.attention-row div{flex:1;min-width:0}.attention-row strong,.attention-row small{display:block}.attention-row small{margin-top:5px;color:var(--muted)}.attention-row:hover{background:#f0f6fc}.preferences-form{max-width:720px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:24px}.calendar-weekday{padding:12px;text-align:center;font-weight:700;background:#edf3f9}.calendar-day{min-height:130px;padding:10px;border-top:1px solid var(--line);border-right:1px solid var(--line);min-width:0}.calendar-day.blank{background:#f5f7fa}.calendar-entry{display:block!important;font-size:12px!important;text-align:left;padding:6px!important;margin-top:6px!important;width:100%;white-space:normal!important;overflow-wrap:anywhere;background:#e8f1fb!important;color:#163e6a!important;border:0!important;border-radius:6px!important;text-decoration:none}.calendar-entry.social{background:#f2eafb!important;color:#6a3585!important}.calendar-entry.task{background:#e5f4eb!important;color:#236045!important}.document-row{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:24px;border-bottom:1px solid var(--line)}.document-row:last-child{border-bottom:0}.document-row>div:first-child{min-width:0;flex:1}.document-row h3{overflow-wrap:anywhere}.document-row p{margin:6px 0;color:var(--muted)}.document-row details{margin-top:12px}.version-link{display:block;padding:8px 0;overflow-wrap:anywhere}.agenda-list{display:none}.social-plan details{margin-top:18px}.social-plan .actions{flex-wrap:wrap}#document-search{flex:1}.preferences-form .social-recipient{padding:12px 0}.preferences-form .field{margin-bottom:20px}
@media(max-width:700px){.calendar-grid{display:none}.agenda-list{display:block}.attention-preview{padding:16px}.attention-row{padding:14px 12px;gap:10px;align-items:flex-start}.attention-row .pill{font-size:10px}.attention-row small{line-height:1.5}.document-row{display:block;padding:18px}.document-row .actions{margin-top:18px;display:flex;flex-wrap:wrap}.section-heading>.actions{width:100%;flex-wrap:wrap}.preferences-form{padding:20px}.social-plan .actions .btn{min-height:44px}.agenda-list .task-row{align-items:flex-start}.agenda-list .task-info{min-width:0}.calendar-entry{min-height:44px}}
@media(max-width:700px){.section-heading{display:flex!important;flex-direction:column;align-items:stretch;gap:12px}.section-heading>div{width:100%;min-width:0}.section-heading>.actions{justify-content:flex-start;flex:none}.section-heading h2{word-break:normal;overflow-wrap:normal}.attention-row{color:var(--ink)}}

.sponsor-package-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin:16px 0}.sponsor-package-card{border:1px solid #dce6f2;border-radius:16px;padding:20px;background:#fff}.sponsor-package-card ul{padding-left:20px;line-height:1.7}