/* ARM Governance v4 - Main CSS */ /* fonts are linked from (parallel download — an @import here would serialize it) */ :root { --primary:#1a7a6e; --primary-dark:#145f56; --primary-light:#e8f5f3; --secondary:#1e3a5f; --danger:#e74c3c; --warning:#f39c12; --info:#3498db; --bg:#f5f7fa; --bg-card:#ffffff; --border:#e0e6ed; --text:#2c3e50; --text-muted:#7f8c8d; --sidebar-w:260px; --topbar-h:64px; --radius:12px; --shadow:0 2px 12px rgba(0,0,0,0.08); --shadow-lg:0 8px 32px rgba(0,0,0,0.12); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{font-family:'Tajawal','Inter',sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;} /* ===== LAYOUT ===== LTR (English): sidebar LEFT, main-content margin-left, topbar left=sidebar-w right=0 RTL (Arabic): sidebar RIGHT, main-content margin-right, topbar right=sidebar-w left=0 */ .app-shell{display:flex;min-height:100vh;} /* LTR sidebar — LEFT by default */ .sidebar{ width:var(--sidebar-w);background:var(--primary-dark,#145f56);color:#fff; display:flex;flex-direction:column; position:fixed;top:0;bottom:0; left:0; right:auto; /* LTR: left */ z-index:200;transition:transform 0.3s ease;overflow-y:auto;overflow-x:hidden; } /* RTL sidebar — RIGHT */ [dir="rtl"] .sidebar{ left:auto; right:0; /* RTL: right */ } .sidebar-brand{padding:16px;border-bottom:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .sidebar-brand img{height:44px;width:auto;object-fit:contain;filter:brightness(0) invert(1);flex-shrink:0;max-width:175px;} .sidebar-brand-text{font-size:12px;font-weight:700;color:rgba(255,255,255,0.9);line-height:1.3;} .sidebar-section{padding:8px 0;} .sidebar-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.4);padding:4px 18px 6px;display:block;} .sidebar-link{display:flex;align-items:center;gap:10px;padding:10px 18px;color:rgba(255,255,255,0.75);text-decoration:none;font-size:14px;font-weight:500;border-radius:8px;margin:1px 8px;transition:all 0.2s;} .sidebar-link:hover{background:rgba(255,255,255,0.1);color:#fff;} .sidebar-link.active{background:var(--primary);color:#fff;} /* LTR: content offset from left */ .main-content{margin-left:var(--sidebar-w);margin-right:0;flex:1;min-width:0;padding-top:var(--topbar-h);} /* RTL: content offset from right */ [dir="rtl"] .main-content{margin-left:0;margin-right:var(--sidebar-w);} /* ===== TOPBAR ===== */ /* LTR: topbar starts after left sidebar */ .topbar{ position:fixed;top:0;height:var(--topbar-h); left:var(--sidebar-w);right:0; /* LTR */ background:#fff;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between; padding:0 24px;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,0.06); } /* RTL: topbar starts after right sidebar */ [dir="rtl"] .topbar{ left:0;right:var(--sidebar-w); /* RTL */ } .topbar-left{display:flex;align-items:center;gap:12px;} .topbar-right{display:flex;align-items:center;gap:12px;} .topbar-title{font-size:17px;font-weight:600;color:var(--text);} .hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;border-radius:8px;color:var(--text);align-items:center;justify-content:center;} .topbar-brand-logo{display:none;height:30px;width:auto;object-fit:contain;flex-shrink:0;} .hamburger:hover{background:var(--bg);} .lang-btn{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;text-decoration:none;transition:all 0.2s;} .lang-btn:hover{border-color:var(--primary);color:var(--primary);} .notif-btn{position:relative;background:none;border:none;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:all 0.2s;} .notif-btn:hover{background:var(--bg);color:var(--text);} .notif-badge{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid #fff;} /* ===== USER MENU ===== */ .user-menu{position:relative;} .user-menu-btn{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--border);border-radius:10px;padding:5px 10px 5px 5px;cursor:pointer;transition:all 0.2s;min-width:160px;} .user-menu-btn:hover{border-color:var(--primary);} .user-avatar{width:32px;height:32px;border-radius:8px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;} .user-menu-info{flex:1;text-align:start;min-width:0;} .user-menu-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .user-menu-role{font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .user-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);z-index:500;overflow:hidden;display:none;} [dir="rtl"] .user-dropdown{right:auto;left:0;} .user-dropdown.open{display:block;} .dropdown-section-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);padding:10px 14px 4px;} .dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;color:var(--text);text-decoration:none;transition:background 0.15s;cursor:pointer;border:none;background:none;width:100%;text-align:start;} .dropdown-item:hover{background:var(--bg);} .dropdown-item.danger{color:var(--danger);} .dropdown-divider{height:1px;background:var(--border);margin:4px 0;} .profile-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;} .profile-item:hover{background:var(--bg);} .profile-dot{width:8px;height:8px;border-radius:50%;background:var(--border);flex-shrink:0;} .profile-dot.active{background:var(--primary);} .profile-item-info{flex:1;} .profile-item-company{font-size:13px;font-weight:600;color:var(--text);} .profile-item-role{font-size:11px;color:var(--text-muted);} /* ===== AUTH PAGES ===== flex-direction: row LTR: .auth-left first (left side), .auth-right second (right side) — form on left, panel on right RTL: same HTML order, but direction:rtl reverses them automatically — panel on right, form on left Wait — we want: form on LEFT, panel on RIGHT in both languages In LTR: auth-left (form) LEFT, auth-right (panel) RIGHT ✓ In RTL: we set order explicitly so form stays LEFT, panel stays RIGHT */ .auth-page{min-height:100vh;display:flex;flex-direction:row;} /* Form side — always LEFT */ .auth-left{ flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center; padding:40px;background:#fff; order:1; /* always first visually = LEFT */ } /* Panel side — always RIGHT */ .auth-right{ width:420px;background:linear-gradient(135deg,var(--secondary) 0%,var(--primary) 100%); display:flex;flex-direction:column;justify-content:center;align-items:center; padding:48px 36px;color:#fff; order:2; /* always second visually = RIGHT */ } /* RTL: keep same visual order (form left, panel right) by overriding RTL flex reversal */ [dir="rtl"] .auth-page{flex-direction:row;} [dir="rtl"] .auth-left{order:1;} [dir="rtl"] .auth-right{order:2;} .auth-right-content{width:100%;max-width:320px;} .auth-logo{margin-bottom:28px;text-align:center;} .auth-logo-img{height:44px;} .auth-title{font-size:24px;font-weight:700;color:var(--text);margin-bottom:6px;} .auth-subtitle{font-size:14px;color:var(--text-muted);margin-bottom:28px;} .auth-form-box{width:100%;max-width:400px;} .auth-right .auth-title{color:#fff;} .auth-right .auth-subtitle{color:rgba(255,255,255,0.75);} .auth-features{margin-top:28px;display:flex;flex-direction:column;gap:14px;} .auth-feature{display:flex;align-items:flex-start;gap:12px;} .auth-feature-icon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;} .auth-feature-text h4{font-size:13px;font-weight:600;color:#fff;} .auth-feature-text p{font-size:12px;color:rgba(255,255,255,0.7);line-height:1.4;} .demo-box{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:10px;padding:14px;margin-top:20px;} .demo-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.6);margin-bottom:10px;} .demo-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px;} .demo-row span:first-child{color:rgba(255,255,255,0.7);} .demo-row span:last-child{color:#fff;font-weight:600;font-family:monospace;} .input-with-icon{position:relative;} .input-with-icon .field-icon{position:absolute;top:50%;transform:translateY(-50%);left:12px;color:var(--text-muted);pointer-events:none;} [dir="rtl"] .input-with-icon .field-icon{left:auto;right:12px;} .input-with-icon input{padding-left:38px;} [dir="rtl"] .input-with-icon input{padding-left:14px;padding-right:38px;} .form-note{font-size:11px;color:var(--text-muted);margin-top:4px;} .form-check-row{display:flex;align-items:center;gap:8px;} .checkbox-label{font-size:13px;color:var(--text-muted);cursor:pointer;user-select:none;} .form-check-row input[type="checkbox"]{width:16px;height:16px;accent-color:var(--primary);} /* ===== PAGE CONTENT ===== */ .page-content{padding:24px;} .page-header{margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;} .page-header-left h1{font-size:22px;font-weight:700;color:var(--text);} .page-header-left p{font-size:14px;color:var(--text-muted);margin-top:2px;} /* ===== CARDS ===== */ .card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;} .card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;} .card-title{font-size:16px;font-weight:600;color:var(--text);} .card-body{padding:20px;} /* ===== STATS ===== */ .stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:24px;} .stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:8px;} .stat-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;} .stat-label{font-size:12px;color:var(--text-muted);font-weight:500;} .stat-value{font-size:26px;font-weight:700;color:var(--text);} /* ===== TABLES ===== */ .table-responsive{overflow-x:auto;} table{width:100%;border-collapse:collapse;font-size:14px;} thead th{background:var(--bg);padding:12px 16px;text-align:start;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid var(--border);white-space:nowrap;} tbody td{padding:13px 16px;border-bottom:1px solid var(--border);} tbody tr:last-child td{border-bottom:none;} tbody tr:hover{background:var(--bg);} /* ===== BADGES ===== */ .badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;} .badge-success{background:#d4edda;color:#155724;} .badge-danger{background:#f8d7da;color:#721c24;} .badge-warning{background:#fff3cd;color:#856404;} .badge-info{background:#d1ecf1;color:#0c5460;} .badge-primary{background:var(--primary-light);color:var(--primary-dark);} .badge-secondary{background:#e2e8f0;color:#475569;} /* ===== FORMS ===== */ .form-group{margin-bottom:18px;} .form-label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;} .form-label .required{color:var(--danger);margin-inline-start:2px;} .form-control{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;transition:border-color 0.2s;outline:none;} .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,122,110,0.1);} .form-control::placeholder{color:#b0bec5;} select.form-control{cursor:pointer;} textarea.form-control{resize:vertical;min-height:100px;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}.form-row .form-control{width:100%;min-width:0;} .form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;} /* ===== BUTTONS ===== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:8px;font-size:14px;font-weight:600;font-family:inherit;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:all 0.2s;min-height:40px;white-space:nowrap;} .btn-sm{padding:5px 12px;font-size:12px;min-height:32px;} .btn-lg{padding:12px 24px;font-size:16px;min-height:48px;} .btn-full{width:100%;} .btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);} .btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);} .btn-secondary{background:var(--bg);color:var(--text);border-color:var(--border);} .btn-secondary:hover{border-color:var(--primary);color:var(--primary);} .btn-danger{background:var(--danger);color:#fff;border-color:var(--danger);} .btn-danger:hover{background:#c0392b;} .btn-outline{background:transparent;border-color:var(--primary);color:var(--primary);} .btn-outline:hover{background:var(--primary);color:#fff;} .btn-icon{width:36px;height:36px;padding:0;border-radius:8px;} /* ===== MODALS ===== */ .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto;} .modal-backdrop.open{display:flex;} .modal{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;animation:modal-in 0.25s ease;overflow:hidden;} @keyframes modal-in{from{opacity:0;transform:scale(0.95) translateY(-10px);}to{opacity:1;transform:none;}} .modal-header{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;} .modal-title{font-size:16px;font-weight:700;} .modal-close{background:none;border:none;cursor:pointer;font-size:20px;color:var(--text-muted);line-height:1;} .modal-body{padding:20px;overflow-y:auto;flex:1;} .modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;} /* ===== INFO BANNER ===== */ .info-banner{background:#e8f4fd;border:1px solid #bee3f8;border-radius:8px;padding:12px 16px;display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;} .info-banner p{font-size:13px;color:#2c5282;line-height:1.5;} /* ===== BOARD ===== */ .board-members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;} .board-member-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:10px;transition:box-shadow 0.2s;} .board-member-card:hover{box-shadow:var(--shadow-lg);} .bm-avatar{width:48px;height:48px;border-radius:12px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;} .bm-name{font-size:15px;font-weight:700;} .bm-title{font-size:12px;color:var(--primary);font-weight:600;} .bm-email{font-size:12px;color:var(--text-muted);} .bm-info{display:flex;flex-direction:column;gap:3px;} .bm-actions{display:flex;gap:6px;} .board-empty-state{text-align:center;padding:60px 24px;display:flex;flex-direction:column;align-items:center;gap:16px;} .board-empty-icon{width:80px;height:80px;border-radius:20px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:36px;} .board-empty-state h3{font-size:18px;font-weight:700;} .board-empty-state p{font-size:14px;color:var(--text-muted);max-width:360px;} .director-row{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:12px;} .director-row-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;} .director-row-title{font-size:14px;font-weight:600;} /* ===== INTEGRATION CARDS ===== */ .integration-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:16px;} .integration-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;} .int-icon{width:40px;height:40px;border-radius:10px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:18px;} .integration-card h4{font-size:14px;font-weight:700;} .integration-card p{font-size:12px;color:var(--text-muted);} /* ===== PROFILE HERO ===== */ .profile-hero{background:linear-gradient(135deg,var(--secondary) 0%,var(--primary) 100%);border-radius:var(--radius);padding:28px;display:flex;align-items:center;gap:20px;margin-bottom:24px;color:#fff;} .profile-avatar-lg{width:72px;height:72px;border-radius:16px;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;flex-shrink:0;} .profile-hero-info h2{font-size:20px;font-weight:700;} .profile-hero-info p{font-size:13px;opacity:0.8;margin-top:2px;} .profile-hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;} .profile-hero-badge{background:rgba(255,255,255,0.2);color:#fff;border-radius:6px;padding:3px 10px;font-size:12px;font-weight:600;} /* ===== TABS ===== */ .tab-list{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:20px;overflow-x:auto;} .tab-btn{padding:10px 18px;font-size:14px;font-weight:600;color:var(--text-muted);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all 0.2s;} .tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);} .tab-panel{display:none;} .tab-panel.active{display:block;} /* ===== ALERTS & TOAST ===== */ .alert{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:14px;display:flex;align-items:flex-start;gap:10px;} .alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb;} .alert-danger{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;} .toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;} [dir="rtl"] .toast-container{right:auto;left:24px;} .toast{background:#333;color:#fff;padding:12px 18px;border-radius:10px;font-size:14px;box-shadow:var(--shadow-lg);animation:toast-in 0.3s ease;max-width:320px;} @keyframes toast-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} .toast.success{background:var(--primary);} .toast.error{background:var(--danger);} /* ===== WIZARD ===== */ .wizard-steps{display:flex;margin-bottom:28px;border-radius:10px;overflow:hidden;border:1px solid var(--border);} .wizard-step{flex:1;padding:12px 10px;text-align:center;font-size:13px;font-weight:600;color:var(--text-muted);background:var(--bg);border-right:1px solid var(--border);} [dir="rtl"] .wizard-step{border-right:none;border-left:1px solid var(--border);} .wizard-step:last-child{border-right:none;} [dir="rtl"] .wizard-step:last-child{border-left:none;} .wizard-step.active{background:var(--primary);color:#fff;} .wizard-step.done{background:var(--primary-light);color:var(--primary);} /* ===== EMPTY STATE ===== */ .empty-state{text-align:center;padding:40px;color:var(--text-muted);display:flex;flex-direction:column;align-items:center;gap:12px;} .empty-state h3{font-size:16px;font-weight:600;color:var(--text);} /* ===== SIDEBAR BACKDROP ===== */ .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:190;} /* ===== SPINNER ===== */ .spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;display:inline-block;vertical-align:middle;} @keyframes spin{to{transform:rotate(360deg);}} /* ===== UTILITIES ===== */ .text-muted{color:var(--text-muted);} .text-primary{color:var(--primary);} .text-danger{color:var(--danger);} .text-center{text-align:center;} .fw-bold{font-weight:700;} .fw-600{font-weight:600;} .d-flex{display:flex;} .align-center{align-items:center;} .justify-between{justify-content:space-between;} .gap-8{gap:8px;} .gap-12{gap:12px;} .mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;} .w-100{width:100%;} /* ===== RESPONSIVE ===== */ @media(max-width:900px){ html,body{overflow-x:hidden;} /* LTR mobile: slide sidebar out to left */ .sidebar{transform:translateX(-100%);} .sidebar.open{transform:translateX(0);} /* RTL mobile: slide sidebar out to right */ [dir="rtl"] .sidebar{transform:translateX(100%);} [dir="rtl"] .sidebar.open{transform:translateX(0);} .sidebar-backdrop.open{display:block;} .main-content{margin-left:0!important;margin-right:0!important;} .topbar{left:0!important;right:0!important;} .hamburger{display:flex;} .topbar-brand-logo{display:block;height:43px;} .topbar-title{display:none;} .user-menu-btn{min-width:0;padding:4px;border:none;gap:0;} .user-menu-btn .umb-text{display:none;} .auth-right{display:none;} .auth-left{padding:24px;} .form-row,.form-row-3{grid-template-columns:1fr;} .stats-grid{grid-template-columns:1fr 1fr;} } @media(max-width:600px){ .page-content{padding:16px;} .modal{margin:0;border-radius:0;max-height:100vh;} .modal-backdrop{padding:0;align-items:flex-end;} .board-members-grid{grid-template-columns:1fr;} .page-header{flex-direction:column;align-items:flex-start;} .profile-hero{flex-direction:column;align-items:flex-start;} } /* ───────────────────────────────────────────────────────────── Fix #1: Role badges in admin users table ──────────────────────────────────────────────────────────────*/ .role-badges-cell { display:flex; flex-wrap:wrap; gap:4px; } .role-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; background:var(--primary-light,#e0fafa); color:var(--primary); font-size:12px; font-weight:500; white-space:nowrap; } /* ───────────────────────────────────────────────────────────── Fix #5 & #6: Board + Profile edit pages ──────────────────────────────────────────────────────────────*/ /* Breadcrumb */ .breadcrumb-nav { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); margin-bottom:4px; } .breadcrumb-nav a { color:var(--text-muted); text-decoration:none; } .breadcrumb-nav a:hover { color:var(--primary); } .breadcrumb-sep { color:var(--text-muted); } /* Board empty state */ .ebana-board-empty-wrap { display:flex; justify-content:center; align-items:center; min-height:60vh; } .ebana-board-empty-card { text-align:center; padding:48px; max-width:520px; background:#fff; border-radius:16px; border:1px solid var(--border); } .ebana-board-empty-icon { margin-bottom:24px; } .ebana-board-empty-title { font-size:20px; font-weight:700; color:var(--text-primary); margin-bottom:10px; } .ebana-board-empty-sub { font-size:14px; color:var(--text-muted); line-height:1.6; } /* Slideover (Add Director panel) */ .slideover-backdrop { position:fixed; inset:0; z-index:1000; display:flex; justify-content:flex-end; background:rgba(0,0,0,0.4); } .slideover { width:420px; max-width:100%; height:100%; background:#fff; display:flex; flex-direction:column; box-shadow:-4px 0 24px rgba(0,0,0,0.12); animation:slideIn 0.2s ease; } @keyframes slideIn { from{transform:translateX(100%)} to{transform:translateX(0)} } .slideover-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border); } .slideover-title { font-size:18px; font-weight:700; color:var(--text-primary); } .slideover-close { background:none; border:none; font-size:24px; color:var(--text-muted); cursor:pointer; padding:0; line-height:1; } .slideover-body { flex:1; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:4px; } .slideover-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; } /* Setup page sections */ .setup-page-body { display:flex; flex-direction:column; gap:0; } .setup-section { display:flex; flex-direction:column; gap:12px; padding:24px 0; border-bottom:1px solid var(--border); } .setup-section-label { font-size:16px; font-weight:700; color:var(--text-primary); } .setup-section-label-wrap { display:flex; align-items:center; gap:6px; } .setup-section-content { } .setup-field-row { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--bg-secondary,#f8f8f8); border-radius:8px; } .setup-field-icon { font-size:18px; } .setup-field-label { flex:1; font-size:14px; color:var(--text-primary); } .setup-inline-input { width:80px; text-align:center; } .info-icon { font-size:16px; color:var(--text-muted); cursor:help; } .info-banner-teal { display:flex; gap:12px; background:#1a2744; border-radius:12px; padding:16px; color:#fff; } .info-banner-teal p { font-size:13px; line-height:1.6; margin:0; } .info-banner-teal .info-banner-icon { flex-shrink:0; margin-top:2px; } .assigner-pill { padding:6px 16px; border-radius:20px; border:1.5px solid var(--border); background:#fff; font-size:13px; font-weight:600; cursor:pointer; color:var(--text-primary); } .assigner-pill:hover { border-color:var(--primary); color:var(--primary); } .director-chip { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:#fff; margin-bottom:8px; } .director-chip-avatar { width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0; } .director-chip-info { flex:1; } .director-chip-info strong { display:block; font-size:14px; } .director-chip-info span { font-size:12px; color:var(--text-muted); } .director-chip-remove { background:none; border:none; color:var(--text-muted); font-size:20px; cursor:pointer; padding:0 4px; } .setup-actions { display:flex; justify-content:flex-end; gap:12px; padding:24px 0; } /* Profile edit page */ .profile-edit-page { display:flex; flex-direction:column; gap:0; } .profile-edit-header-card { display:flex; align-items:center; gap:16px; padding:24px; background:#fff; border:1px solid var(--border); border-radius:12px; margin-bottom:0; } .profile-edit-header-icon { display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:var(--bg-secondary,#f5f5f5); border-radius:10px; } .profile-edit-header-name { font-size:18px; font-weight:700; color:var(--text-primary); } .profile-edit-section { display:grid; grid-template-columns:260px 1fr; gap:32px; padding:28px 0; border-bottom:1px solid var(--border); } .profile-edit-section-left { } .profile-edit-section-title { font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:4px; } .profile-edit-section-desc { font-size:13px; color:var(--text-muted); line-height:1.5; } .profile-edit-section-right { display:flex; flex-direction:column; gap:16px; } .profile-edit-actions { display:flex; justify-content:flex-end; gap:12px; padding:24px 0; } /* Upload dropzone */ .logo-upload-row { display:flex; gap:16px; align-items:flex-start; } .logo-preview-box { display:flex; flex-direction:column; align-items:center; gap:8px; } .logo-preview-placeholder { width:64px; height:64px; background:var(--bg-secondary,#f0f0f0); border-radius:8px; } .btn-link-danger { background:none; border:none; color:#e53e3e; font-size:13px; cursor:pointer; font-weight:500; } .upload-dropzone { flex:1; border:2px dashed var(--primary); border-radius:10px; padding:24px 16px; text-align:center; cursor:pointer; background:#f0fafa; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; transition:background 0.15s; } .upload-dropzone:hover { background:#e0f5f3; } .upload-dropzone.dragover { background:#d3efeb; border-style:solid; } .upload-dropzone p { font-size:13px; color:var(--text-muted); margin:0; } .upload-dropzone .link { color:var(--primary); text-decoration:underline; } .upload-hint { font-size:11px; color:#bbb; } .upload-dropzone-inner { border:2px dashed var(--primary); border-radius:10px; padding:24px 16px; text-align:center; cursor:pointer; background:#f0fafa; } .upload-dropzone-inner p { font-size:13px; color:var(--text-muted); margin:6px 0 0; } .upload-dropzone-inner .link { color:var(--primary); text-decoration:underline; } .upload-hint { font-size:11px; color:var(--text-muted); } /* Toggle switch */ .toggle-row { display:flex; align-items:center; gap:12px; } .toggle-row-labeled { display:flex; align-items:center; justify-content:space-between; gap:16px; } .toggle-label-block { flex:1; } .toggle-label-title { display:block; font-size:14px; font-weight:600; color:var(--text-primary); } .toggle-label-desc { display:block; font-size:12px; color:var(--text-muted); margin-top:4px; line-height:1.5; } .toggle-switch { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; } .toggle-switch input { opacity:0; width:0; height:0; } .toggle-slider { position:absolute; cursor:pointer; inset:0; background:#ccc; border-radius:24px; transition:0.3s; } .toggle-slider:before { position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.3s; } .toggle-switch input:checked + .toggle-slider { background:var(--primary); } .toggle-switch input:checked + .toggle-slider:before { transform:translateX(20px); } .toggle-label { font-size:14px; color:var(--text-primary); } /* Social links row */ .social-link-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; } /* duplicate .btn-outline removed - canonical definition is near .btn-primary */ /* Observer row */ .observer-row { margin-bottom:8px; } @media(max-width:700px){ .profile-edit-section { grid-template-columns:1fr; } .slideover { width:100%; } } /* ═══════════════════════════════════════════════════════ TOPBAR ICON BUTTONS (help, chat, bell) ═══════════════════════════════════════════════════════ */ .topbar-icon-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:none; border:none; cursor:pointer; color:var(--text-muted); position:relative; transition:background 0.15s; } .topbar-icon-btn:hover { background:var(--bg-secondary,#f0f0f0); color:var(--text-primary); } /* ═══════════════════════════════════════════════════════ USER MENU BUTTON — Ebana style [ Company Name ] [ Company Account ▾ ] [🟢 ش] ═══════════════════════════════════════════════════════ */ .user-menu { position:relative; } .user-menu-btn { display:flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer; padding:4px 4px 4px 10px; border-radius:10px; transition:background 0.15s; } .user-menu-btn:hover { background:var(--bg-secondary,#f5f5f5); } /* Text block — right-aligned */ .umb-text { text-align:end; min-width:0; } .umb-company { font-size:13px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; line-height:1.3; } .umb-role { font-size:11px; color:var(--text-muted); display:flex; align-items:center; justify-content:flex-end; gap:3px; line-height:1.3; } /* Avatar circle */ .umb-avatar { width:38px; height:38px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; flex-shrink:0; } /* ═══════════════════════════════════════════════════════ USER DROPDOWN — Ebana workspace style ═══════════════════════════════════════════════════════ */ .user-dropdown { position:absolute; top:calc(100% + 8px); inset-inline-end:0; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,0.12); min-width:260px; z-index:1000; overflow:hidden; display:none; } .user-dropdown.open { display:block; } .dropdown-ws-header { font-size:11px; font-weight:700; color:#888; letter-spacing:0.06em; padding:12px 16px 6px; text-transform:uppercase; } .dropdown-ws-item { display:flex; align-items:center; gap:10px; padding:10px 16px; cursor:pointer; transition:background 0.15s; } .dropdown-ws-item:hover { background:#f5f5f5; } .dropdown-ws-item.active { background:var(--primary-light,#e8f5f3); border-inline-start:3px solid var(--primary); padding-inline-start:13px; } .dropdown-ws-item.active .dropdown-ws-name { font-weight:800; color:var(--primary); } .dropdown-ws-avatar { width:36px; height:36px; border-radius:50%; background:var(--primary-light,#e8f5f3); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; } .dropdown-ws-avatar img { width:100%; height:100%; border-radius:50%; object-fit:contain; background:#fff; } .dropdown-ws-info { min-width:0; } .dropdown-ws-name { font-size:13px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dropdown-ws-role { font-size:11px; color:var(--text-muted); } /* Options row: globe / moon / logout */ .dropdown-options-row { display:flex; align-items:center; gap:4px; padding:10px 16px 12px; } .dropdown-opts-label { font-size:12px; color:#888; margin-inline-end:6px; } .dropdown-icon-btn { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--primary); text-decoration:none; transition:background 0.15s; } .dropdown-icon-btn:hover { background:var(--primary-light); color:var(--primary-dark); } .dropdown-icon-btn.danger { color:#e53e3e; } .dropdown-icon-btn.danger:hover { background:#fff0f0; color:#e53e3e; } /* Edit button on dark hero background */ .profile-hero-edit { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:8px; background:rgba(255,255,255,0.15); border:1.5px solid rgba(255,255,255,0.5); color:#fff; font-size:13px; font-weight:600; text-decoration:none; cursor:pointer; transition:all 0.2s; flex-shrink:0; margin-inline-start:auto; } .profile-hero-edit:hover { background:rgba(255,255,255,0.28); border-color:#fff; } /* Profile avatar with logo */ .profile-avatar-lg img { width:72px; height:72px; border-radius:16px; object-fit:contain; background:#fff; } /* ═══════════════════════════════════════════════════════ pe-section: two-column label + fields layout Used in profile_edit and board_setup card-body ═══════════════════════════════════════════════════════ */ .pe-section { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 24px 0; align-items: start; } .pe-label-col { padding-inline-end: 8px; } .pe-section-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .pe-section-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; } .pe-fields-col { display: flex; flex-direction: column; gap: 4px; } .pe-divider { height: 1px; background: var(--border); margin: 0; } @media (max-width: 640px) { .pe-section { grid-template-columns: 1fr; gap: 10px; } .pe-label-col { padding-inline-end: 0; } } /* ═══════════════════════════════════════════════════════ App Dialog System (replaces alert/confirm/prompt) ═══════════════════════════════════════════════════════ */ .app-dialog-backdrop { position: fixed; inset: 0; z-index: 3000; background: rgba(15, 23, 32, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.15s ease; } .app-dialog-backdrop.open { opacity: 1; } .app-dialog { background: #fff; border-radius: 16px; padding: 28px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); transform: translateY(8px) scale(0.97); transition: transform 0.15s ease; text-align: center; } .app-dialog-backdrop.open .app-dialog { transform: translateY(0) scale(1); } .app-dialog-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .app-dialog-icon-danger { background: #fde8e8; color: #e53e3e; } .app-dialog-icon-info { background: #e6f5f3; color: var(--primary); } .app-dialog-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px; } .app-dialog-message { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; } .app-dialog-input { width: 100%; margin-bottom: 20px; text-align: start; } .app-dialog-actions { display: flex; gap: 10px; justify-content: center; } .app-dialog-actions .btn { flex: 1; } @media (max-width: 420px) { .app-dialog { padding: 22px; } } /* ───────────────────────────────────────────────────────────── Shared governance widgets (meetings sections, minutes, tracking) ──────────────────────────────────────────────────────────────*/ .arm-list-section-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--text);margin:18px 2px 10px;} .arm-list-section-head:first-child{margin-top:0;} .arm-list-empty{font-size:13px;color:var(--text-muted);padding:6px 2px 4px;margin:0;} .mn-subtabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;} .mn-subtab{padding:8px 18px;border-radius:100px;border:1.5px solid var(--border);background:#fff;font-size:13px;font-weight:700;color:var(--text-muted);cursor:pointer;font-family:inherit;transition:all .15s;} .mn-subtab:hover{border-color:var(--primary);color:var(--primary);} .mn-subtab.active{background:var(--primary);border-color:var(--primary);color:#fff;} .mn-table{width:100%;border-collapse:collapse;font-size:13.5px;} .mn-table th{text-align:start;font-size:11px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;} .mn-table td{padding:11px 10px;border-bottom:1px solid #f0f2f4;} .mn-table tbody tr{cursor:pointer;transition:background .12s;} .mn-table tbody tr:hover{background:#f9fafb;} .res-filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;} .res-filter-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:100px;border:1.5px solid var(--border);background:#fff;font-size:12.5px;font-weight:700;color:var(--text-muted);cursor:pointer;font-family:inherit;transition:all .15s;} .res-filter-pill:hover{border-color:var(--primary);color:var(--primary);} .res-filter-pill.active{background:var(--primary);border-color:var(--primary);color:#fff;} .res-filter-count{font-size:11px;font-weight:800;background:rgba(0,0,0,.07);border-radius:100px;padding:1px 7px;} .res-filter-pill.active .res-filter-count{background:rgba(255,255,255,.22);} /* Governance module tabs (shared, larger) + method/platform cards */ .board-tabs{display:flex;gap:5px;margin-bottom:26px;background:#f3f4f6;border-radius:14px;padding:5px;} .board-tab{display:flex;align-items:center;gap:9px;padding:13px 26px;font-size:14.5px;font-weight:700;color:var(--text-muted);background:none;border:none;cursor:pointer;border-radius:10px;transition:all .18s;white-space:nowrap;font-family:inherit;} .board-tab svg{width:16px;height:16px;} .board-tab:hover{color:var(--text);} .board-tab.active{background:#fff;color:var(--primary);box-shadow:0 1px 6px rgba(0,0,0,.10);} @media(max-width:640px){ .board-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;} .board-tab{padding:11px 15px;font-size:13px;flex-shrink:0;} } .platform-card{border:2px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;transition:border-color .2s;} .platform-card.selected{border-color:var(--primary);background:var(--primary-light,#f0fafa);} .platform-card-title{font-size:13px;font-weight:700;margin-bottom:6px;} .platform-recommended{font-weight:400;color:var(--text-muted);font-size:11px;} .platform-card-desc{font-size:12px;color:var(--text-muted);line-height:1.5;margin:0;} /* ── Method & Location: 3-card chooser with ARM Meeting Platform featured ── */ .mt-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .mt-choice-grid .arm-featured{grid-column:1 / -1;} .platform-card.arm-featured.selected{border-color:var(--primary);background:linear-gradient(135deg,#f0faf8,#e3f1ec);box-shadow:0 5px 16px rgba(15,74,66,.13);} .arm-feat-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px;} .arm-feat-head .platform-card-title{font-size:14px;margin-bottom:0;} .arm-feat-logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#0f4a42,#1a7a6e);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;} .arm-feat-badge{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#0f4a42,#1a7a6e);color:#fff;font-size:10.5px;font-weight:800;border-radius:100px;padding:4px 11px;margin-inline-start:auto;white-space:nowrap;} .arm-feat-points{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:11px;} .arm-feat-points span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--primary);} @media (max-width: 640px){ .mt-choice-grid{grid-template-columns:1fr 1fr;} .arm-feat-badge{margin-inline-start:0;} .arm-feat-points{gap:6px 12px;} } /* In-page detail view (replaces the old popup) */ .det-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border);flex-wrap:wrap;} .det-title{font-size:17px;font-weight:800;margin:0;line-height:1.4;} .det-sub{font-size:12px;color:var(--text-muted);margin-top:2px;} .det-body{max-width:820px;} .det-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap;} .res-total{font-size:12.5px;color:var(--text-muted);margin-bottom:14px;} .res-total b{color:var(--text);} .res-doc-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#e8f0fb;color:#2563eb;flex-shrink:0;} .res-dl-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:all .15s;} .res-dl-btn:hover{color:var(--primary);border-color:var(--primary);} .res-th-filter{font-size:11px;font-weight:700;color:var(--text-muted);border:1px solid var(--border);border-radius:7px;padding:3px 8px;background:#fff;font-family:inherit;cursor:pointer;max-width:190px;} /* ── Subscription status banner (company pages) ── */ .sub-banner{display:flex;align-items:center;gap:13px;margin:16px 24px 0;padding:12px 18px;border-radius:14px;flex-wrap:wrap;} .sub-banner-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .sub-banner-txt{flex:1;min-width:180px;} .sub-banner-title{font-size:13.5px;font-weight:800;line-height:1.4;} .sub-banner-sub{font-size:12px;font-weight:500;opacity:.85;margin-top:1px;line-height:1.6;} .sub-banner-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;border-radius:100px;padding:5px 14px;flex-shrink:0;} .sub-banner-trial{background:linear-gradient(120deg,#fdf8ea,#faf1d8);border:1px solid #ecdcae;color:#8a6a1c;box-shadow:0 2px 10px rgba(150,115,29,.08);} .sub-banner-trial .sub-banner-ic{background:linear-gradient(135deg,#e9c96a,#d9b95c);color:#fff;} .sub-banner-trial .sub-banner-pill{background:#fff;border:1px solid #e6d9a8;color:#8a6a1c;} .sub-banner-locked{background:linear-gradient(120deg,#fdf0f0,#fae3e3);border:1px solid #efc3c3;color:#8f2626;box-shadow:0 2px 10px rgba(176,48,48,.08);} .sub-banner-locked .sub-banner-ic{background:linear-gradient(135deg,#d96a6a,#b03030);color:#fff;} .sub-banner-locked .sub-banner-pill{background:#fff;border:1px solid #efc3c3;color:#8f2626;} @media(max-width:600px){.sub-banner{margin:12px 16px 0;padding:11px 14px;}} /* ── Member ↔ account link chips (shared: board / committees / assembly) ── */ .bv-link-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:1px dashed var(--border);} .bv-link-chip{font-size:10.5px;font-weight:800;border-radius:100px;padding:3px 10px;} .bv-linked{background:#e2efe9;color:#1d6a4a;} .bv-pending{background:#faf3dd;color:#96731d;} .bv-unlinked{background:#f1f5f9;color:#64748b;} .bv-link-btn{font-size:10.5px;font-weight:700;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:8px;padding:3px 9px;cursor:pointer;font-family:inherit;} .bv-link-btn:hover{border-color:var(--primary);color:var(--primary);} .bv-link-select{font-size:11px;border:1px solid var(--border);border-radius:8px;padding:3px 6px;font-family:inherit;max-width:170px;} /* ── Notifications bell ── */ .notif-badge{position:absolute;top:6px;inset-inline-end:6px;min-width:16px;height:16px;border-radius:100px;background:#e05252;color:#fff;font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;} .notif-panel{display:none;position:absolute;top:calc(100% + 10px);inset-inline-end:0;width:min(360px,92vw);background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.14);z-index:1500;overflow:hidden;} .notif-panel.open{display:block;} .notif-head{font-size:13px;font-weight:800;padding:13px 16px 9px;border-bottom:1px solid var(--border);} .notif-list{max-height:380px;overflow-y:auto;} .notif-item{display:block;padding:11px 16px;text-decoration:none;color:var(--text);border-bottom:1px solid #f1f4f3;transition:background .12s;} .notif-item:hover{background:#f7faf9;} .notif-item.unread{background:#f2f8f6;} .notif-item .nt{font-size:12.5px;font-weight:700;line-height:1.55;} .notif-item .nd{font-size:10.5px;color:var(--text-muted);margin-top:2px;} .notif-empty{padding:26px 16px;text-align:center;font-size:12.5px;color:var(--text-muted);} @media (max-width: 640px){ .notif-panel{position:fixed;top:60px;inset-inline:10px;width:auto;max-width:none;} .notif-list{max-height:min(60vh,420px);} } /* ── Detail UX: meta chips, overflow menu, dominant join ── */ .dt-chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;} .dt-chip{display:inline-flex;align-items:center;gap:7px;background:#f6f8fa;border:1px solid var(--border);border-radius:100px;padding:6px 14px;font-size:12.5px;} .dt-chip-ic{display:inline-flex;color:var(--primary);} .dt-chip-l{color:var(--text-muted);font-size:11px;font-weight:700;} .dt-chip-v{font-weight:700;} .arm-ovf{position:relative;display:inline-block;} .arm-ovf-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s;} .arm-ovf-btn:hover{background:#f6f8fa;color:var(--text);} .arm-ovf-menu{display:none;min-width:190px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.13);padding:6px;z-index:100;} .arm-ovf.open .arm-ovf-menu{display:block;} .arm-ovf-item{display:block;width:100%;text-align:start;background:none;border:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--text);padding:10px 12px;border-radius:8px;cursor:pointer;} .arm-ovf-item:hover{background:#f6f8fa;} .arm-ovf-item.danger{color:#c53030;} .arm-ovf-item.danger:hover{background:#fdf1f1;} .arm-join-lg{display:inline-flex;align-items:center;gap:9px;font-size:14.5px !important;font-weight:800 !important;padding:12px 28px !important;border-radius:12px !important;box-shadow:0 4px 14px rgba(15,74,66,.25);} .arm-ovf-item{display:flex;align-items:center;gap:10px;} .arm-ovf-ic{display:inline-flex;color:var(--text-muted);flex-shrink:0;} .arm-ovf-item.danger .arm-ovf-ic{color:#c53030;} @media (max-width: 640px){ .arm-join-lg{width:100%;justify-content:center;} .dt-chips-row{gap:6px;} .dt-chip{padding:5px 11px;font-size:11.5px;} } /* ══ Meeting form UX: grouped sections, native time input, mobile footer ══ */ body > .arm-ovf-menu{z-index:3000;} .arm-ovf-menu.open{display:block;} .mf-sec-t{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--primary);margin:26px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--border);} .mf-sec-t.mf-first{margin-top:0;} .mf-sec-t svg{flex-shrink:0;} input[type="time"].form-control{max-width:190px;font-variant-numeric:tabular-nums;} .mf-footer{flex-wrap:wrap;} @media (max-width: 640px){ .mf-footer{flex-direction:column-reverse;align-items:stretch;} .mf-footer .btn{width:100%;justify-content:center;text-align:center;} input[type="time"].form-control{max-width:none;} } /* ══ Member account-status icon (hover for meaning) ══ */ .bv-acct-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;flex-shrink:0;cursor:pointer;outline:none;} .bv-acct-ic::after{content:attr(data-tip);position:absolute;top:calc(100% + 7px);inset-inline-end:-4px;background:#1f2937;color:#fff; font-size:11px;font-weight:700;padding:5px 11px;border-radius:8px;white-space:nowrap;opacity:0;visibility:hidden; transform:translateY(-3px);transition:opacity .14s, transform .14s;pointer-events:none;z-index:60;box-shadow:0 6px 18px rgba(0,0,0,.18);} .bv-acct-ic:hover::after,.bv-acct-ic:focus::after{opacity:1;visibility:visible;transform:translateY(0);} .bv-acct-on{background:#e6f6ee;color:#177a4c;} .bv-acct-wait{background:#fdf4e3;color:#b07817;} .bv-acct-off{background:#f1f5f9;color:#94a3b8;} /* ══ Long-content resilience: unbroken strings must wrap, never clip ══ */ .dt-body-text,.dt-agenda li,.dt-section-title,.dt-row-value,.dt-chip,.dt-chip-v, .det-title,.det-sub,.mn-table td{overflow-wrap:anywhere;} @media (max-width: 640px){ /* stack detail header: controls as a top toolbar row — status badge at the start, ⋮ + back pinned to the END CORNER — full-width title beneath (!important: the renderer sets flex:1 inline) */ .det-head > div:first-child{flex:1 1 100% !important;order:2;} .det-head > *:not(:first-child){order:1;} .det-head > .arm-ovf{margin-inline-start:auto;} .det-head > button.btn{margin-inline-start:0;} } /* ══ Support tickets ══ */ .sup-row{display:flex;align-items:center;gap:12px;padding:14px 6px;border-bottom:1px solid var(--border);cursor:pointer;} .sup-row:last-child{border-bottom:none;} .sup-row:hover{background:#f8fafb;} .sup-row-main{flex:1;min-width:0;} .sup-row-subj{font-weight:700;font-size:14px;overflow-wrap:anywhere;} .sup-row-meta{font-size:11.5px;color:var(--text-muted);margin-top:3px;} .sup-st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:4px 12px;border-radius:100px;flex-shrink:0;white-space:nowrap;} .sup-st-open{background:#fdf4e3;color:#b07817;} .sup-st-ans{background:#e8f0fd;color:#2456a8;} .sup-st-res{background:#e6f6ee;color:#177a4c;} .sup-thread{display:flex;flex-direction:column;gap:12px;margin:18px 0;} .sup-msg{max-width:78%;border-radius:14px;padding:12px 16px;font-size:13.5px;line-height:1.8;overflow-wrap:anywhere;} .sup-msg > div:first-child{white-space:pre-wrap;} .sup-msg.mine{align-self:flex-start;background:var(--primary);color:#fff;border-end-start-radius:4px;} .sup-msg.theirs{align-self:flex-end;background:#f1f5f4;color:var(--text);border-end-end-radius:4px;} .sup-msg-meta{font-size:10.5px;opacity:.75;margin-top:6px;} .sup-reply{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--border);padding-top:16px;} @media(max-width:640px){.sup-msg{max-width:92%;}} /* ══ 12-hour time picker ══ */ .t12{display:flex;align-items:center;gap:6px;} .t12 select.form-control{width:auto;min-width:66px;padding-inline:8px;} .t12 .ampm-btn{padding:9px 13px;border-radius:8px;border:1px solid var(--border);background:#fff;font-size:13px;font-weight:600;cursor:pointer;color:var(--text-muted);font-family:inherit;} .t12 .ampm-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);} /* ══ Decision panel — sign minutes/resolutions ══ */ .arm-decide{background:linear-gradient(120deg,#eef7f5,#e9f2ee);border:1.5px solid var(--primary);border-radius:14px;padding:16px 18px;margin-bottom:18px;} .arm-decide-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;} .arm-decide-ic{width:38px;height:38px;border-radius:11px;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;} .arm-decide-t{font-size:14px;font-weight:800;color:var(--primary);} .arm-decide-s{font-size:12px;color:#5b7a72;margin-top:2px;} .arm-decide-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .arm-decide-no{background:#fff;border:1px solid #e5b4b4;color:#b03030;font-weight:700;} .arm-decide-no:hover{background:#fdf1f1;} .arm-decide-abs{background:#fff;border:1px solid var(--border);color:var(--text-muted);font-weight:700;} .arm-decide-abs:hover{background:#f6f8fa;} @media(max-width:640px){.arm-decide-actions{flex-direction:column;align-items:stretch;}.arm-decide-actions .btn{width:100%;justify-content:center;}} /* ══ Minutes detail: carded sections, info tiles, numbered discussions, progress ══ */ .mnd-sec{border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:14px;background:#fff;} .mnd-sec-h{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:800;color:var(--primary);margin-bottom:14px;} .mnd-sec-ic{width:30px;height:30px;border-radius:9px;background:var(--primary-light,#e8f5f3);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;} .mnd-sec .dt-section-title{margin-top:0;} .mn-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;} .mn-tile{border:1px solid var(--border);border-radius:11px;padding:11px 13px;background:#fafcfc;min-width:0;} .mn-tile-l{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--text-muted);margin-bottom:5px;} .mn-tile-l svg{flex-shrink:0;} .mn-tile-v{font-size:13px;font-weight:800;color:var(--text);overflow-wrap:anywhere;} .mn-tile-s{font-size:11px;color:var(--text-muted);margin-top:1px;} .mnd-rows{display:flex;flex-direction:column;gap:7px;} .mnd-row{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:9px;padding:9px 12px;font-size:13px;line-height:1.8;overflow-wrap:anywhere;background:#fff;} .mnd-row-n{width:22px;height:22px;border-radius:50%;background:var(--primary-light,#e8f5f3);color:var(--primary);font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px;} .arm-prog{display:flex;align-items:center;gap:12px;margin:2px 0 14px;} .arm-prog-bar{flex:1;height:8px;border-radius:100px;background:#eef1f0;overflow:hidden;} .arm-prog-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--primary),#1a7a6e);transition:width .3s;} .arm-prog-n{font-size:11.5px;font-weight:800;color:var(--primary);white-space:nowrap;} @media(max-width:640px){.mn-tiles{grid-template-columns:1fr 1fr;}} /* ══ Decision split-button (Approve primary; Decline/Abstain in dropdown) ══ */ .arm-split{position:relative;display:inline-flex;align-items:stretch;} .arm-split .arm-join-lg{border-start-end-radius:0 !important;border-end-end-radius:0 !important;} .arm-split-caret{border:none;background:var(--primary);color:#fff;cursor:pointer;padding:0 13px;margin-inline-start:1px; border-radius:12px;border-start-start-radius:0;border-end-start-radius:0;display:inline-flex;align-items:center;justify-content:center; box-shadow:0 4px 14px rgba(15,74,66,.25);} .arm-split-caret:hover{background:var(--primary-dark,#145f56);} .arm-split-menu{display:none;position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:190px;background:#fff; border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.13);padding:6px;z-index:120;} .arm-split.open .arm-split-menu{display:block;} .arm-decide-done{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;border-radius:11px;padding:11px 16px;} @media(max-width:640px){ .arm-split{width:100%;} .arm-split .arm-join-lg{flex:1;} } /* account icon rides the card header row */ .bv-mc-top .bv-acct-ic{margin-inline-start:auto;flex-shrink:0;} /* chair-card header row: badge + account icon */ .bv-chair-toprow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px;} .bv-chair-toprow .bv-chair-badge{margin-bottom:0;} /* pin the chair card's ⋮ menu to the corner, matching the member cards */ .bv-chair-card{position:relative;} .bv-chair-actions{position:absolute;top:14px;inset-inline-end:16px;z-index:2;display:flex;align-items:center;gap:8px;} @media (max-width: 640px){ /* the chair card centers on mobile — the badge row must center with it */ .bv-chair-toprow{justify-content:center;margin-bottom:4px;} .bv-chair-actions{top:10px;inset-inline-end:10px;} } /* ── MemberDocs modal (per-member secure documents) ── */ .mdoc-box{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);margin:0 auto;width:min(560px,94vw);max-height:88vh; display:flex;flex-direction:column;background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.35);} .mdoc-head{display:flex;align-items:center;gap:10px;padding:13px 17px;border-bottom:1px solid var(--border,#e5e7eb);background:#f8fafc;} .mdoc-body{padding:16px 17px;overflow-y:auto;} .mdoc-note{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;line-height:1.6;color:#8a6d1a;background:#fef9e7;border:1px solid #f5e6a8;border-radius:9px;padding:9px 11px;margin-bottom:13px;} .mdoc-note svg{margin-top:1px;color:#b7912a;} .mdoc-upload{background:#f6f8fa;border:1px solid var(--border,#e5e7eb);border-radius:11px;padding:13px;margin-bottom:14px;} .mdoc-upload .form-control{font-size:13px;} .mdoc-list{display:flex;flex-direction:column;gap:8px;} .mdoc-item{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border,#e5e7eb);border-radius:10px;padding:9px 12px;} .mdoc-fic{flex-shrink:0;display:inline-flex;color:var(--primary,#0f4a42);} .mdoc-name-wrap{flex:1;min-width:0;display:flex;align-items:center;cursor:pointer;border-radius:6px;padding:2px 4px;margin:-2px -4px;} .mdoc-name-wrap:hover .mdoc-name{color:var(--primary,#0f4a42);text-decoration:underline;} .mdoc-name{font-size:13px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:color .12s;} .mdoc-name-edit{width:100%;font-size:13px;font-weight:700;padding:4px 8px;height:auto;line-height:1.3;} .mdoc-meta{font-size:11px;color:var(--text-muted,#64748b);margin-top:2px;} .mdoc-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border:1px solid var(--border,#e5e7eb);border-radius:8px;background:#fff;color:var(--primary,#0f4a42);cursor:pointer;text-decoration:none;} .mdoc-ic:hover{background:#f0fafa;} .mdoc-ic.mdoc-del{color:#b91c1c;} .mdoc-ic.mdoc-del:hover{background:#fdecec;} /* Secretary-only "documents" trigger on member cards */ /* hero overflow menu (Profile/Board/Assembly/Committee): the ⋮ sits on a colored gradient hero — make it glassy white instead of an opaque box */ #bv-hero-menu .arm-ovf-btn{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);color:#fff;backdrop-filter:blur(2px);} #bv-hero-menu .arm-ovf-btn:hover{background:rgba(255,255,255,.28);} /* hero ⋮ menu: on mobile the hero-top stacks (column), which dropped the menu below the title — pin it to the top corner of the hero instead */ @media(max-width:640px){ #bv-hero-menu{position:absolute;top:0;inset-inline-end:0;z-index:3;} .bv-hero-top > div:first-child{padding-inline-end:44px;} } /* ─── Resolution detail — reference design (ARMResDetail) ─── */ .rdx-crumb{font-size:11.5px;color:var(--text-muted,#94a3b8);margin-bottom:10px;display:flex;align-items:center;gap:6px;} .rdx-crumb b{color:var(--primary,#0f4a42);font-weight:800;} .rdx-meta{display:flex;flex-wrap:wrap;gap:0;border:1px solid #d5dce6;border-radius:12px;background:#fff;margin:14px 0;overflow:hidden;box-shadow:0 2px 10px rgba(15,23,42,.06);} .rdx-meta-item{flex:1;min-width:150px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-inline-end:1px solid var(--border,#e2e8f0);} .rdx-meta-item:last-child{border-inline-end:none;} .rdx-meta-ic{width:30px;height:30px;border-radius:9px;background:#eef6f4;color:var(--primary,#0f4a42);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;} .rdx-meta-l{font-size:10.5px;font-weight:700;color:var(--text-muted,#64748b);} .rdx-meta-v{font-size:13px;font-weight:800;color:var(--text,#0f172a);} .rdx-grid{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start;} .rdx-grid.single{grid-template-columns:1fr;} .rdx-main{min-width:0;} .rdx-side{min-width:0;position:sticky;top:80px;} @media(max-width:1080px){ /* stacked layout: flatten the two columns and order cards so Approval Members sits ABOVE the Implementation Summary */ .rdx-grid{display:flex;flex-direction:column;align-items:stretch;} .rdx-main,.rdx-side{display:contents;} .rdx-main > *{order:1;} .rdx-side > *{order:2;} .rdx-main > .exec-sec{order:3;} .rdx-side{position:static;} } .rdx-card{border:1px solid #d5dce6;border-radius:14px;background:#fff;padding:16px;margin-bottom:14px;box-shadow:0 2px 10px rgba(15,23,42,.06);} .rdx-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;} .rdx-card-title{font-size:13.5px;font-weight:800;color:var(--text,#0f172a);} .rdx-card-note{font-size:11px;font-weight:700;color:var(--text-muted,#94a3b8);} .rd-clamp{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;} .rd-more{border:none;background:none;color:var(--primary,#0f4a42);font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;padding:6px 0 0;} /* approval summary (inside members card) — Approved prominent, others mini */ .rdx-appr{display:flex;align-items:center;gap:12px;margin-bottom:10px;} .rdx-appr-ic{width:42px;height:42px;border-radius:12px;background:#e9f8ef;color:#1d7a45;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;} .rdx-appr-n{font-size:19px;font-weight:800;line-height:1.2;} .rdx-appr-n span{font-size:12px;font-weight:600;color:var(--text-muted,#94a3b8);} .rdx-appr-l{font-size:11.5px;font-weight:700;color:#475569;} .rdx-appr-bar{height:6px;background:#eef2f7;border-radius:100px;overflow:hidden;margin-bottom:10px;} .rdx-appr-bar > div{height:100%;background:linear-gradient(90deg,#0f4a42,#1a7a6e);border-radius:100px;} .rdx-minis{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #f1f5f9;} .rdx-mini{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;} .rdx-mini svg{width:12px;height:12px;} /* approval members */ .rdx-mem-group{margin-bottom:12px;} .rdx-mem-group:last-child{margin-bottom:0;} .rdx-mem-gh{font-size:11px;font-weight:800;margin-bottom:6px;} .rdx-mem{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #f1f5f9;border-radius:10px;margin-bottom:6px;} .rdx-mem-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;flex-shrink:0;} .rdx-mem-info{flex:1;min-width:0;} .rdx-mem-name{font-size:12.5px;font-weight:800;} .rdx-you{font-size:10px;color:var(--primary,#0f4a42);} .rdx-mem-role{font-size:10.5px;color:var(--text-muted,#94a3b8);} .rdx-mem-cm{font-size:11px;color:#475569;margin-top:2px;} .rdx-mem-sig{height:26px;max-width:70px;object-fit:contain;background:#fff;border:1px solid var(--border,#e2e8f0);border-radius:6px;flex-shrink:0;} .rdx-mem-st{flex-shrink:0;display:inline-flex;} /* ─── ARMExec: implementation summary (donut + expandable rows) ─── */ .exec-add-btn{border:1.5px dashed var(--primary,#0f4a42);background:none;color:var(--primary,#0f4a42);border-radius:8px;padding:5px 12px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;} .exec-add-btn:hover{background:#eef6f4;} .exec-sum{display:flex;align-items:center;gap:18px;margin-bottom:14px;} .exec-donut{width:96px;height:96px;flex-shrink:0;} .exec-sum-n{font-size:20px;font-weight:800;line-height:1.1;} .exec-sum-t{font-size:12px;font-weight:700;color:var(--text-muted,#64748b);margin-bottom:6px;} .exec-sum-legend{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:11.5px;font-weight:700;} .exec-leg.done{color:#1d7a45;} .exec-leg.prog{color:#1e3a5f;} .exec-leg.idle{color:#64748b;} .exec-leg.block{color:#b03030;} .exec-row{border:1px solid #d5dce6;border-radius:12px;margin-bottom:10px;background:#fff;overflow:hidden;box-shadow:0 1px 6px rgba(15,23,42,.05);} .exec-row.open{border-color:#cfe0db;box-shadow:0 2px 10px rgba(15,74,66,.06);} .exec-row-head{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;} .exec-row-head:hover{background:#fafcfb;} .exec-row-ic{width:38px;height:38px;border-radius:10px;background:#eef6f4;color:var(--primary,#0f4a42);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;} .exec-row-mid{flex:1;min-width:0;} .exec-row-title{font-size:13px;font-weight:800;line-height:1.4;} .exec-row-sub{font-size:11px;color:var(--text-muted,#94a3b8);margin:1px 0 6px;} .exec-row-bar{display:flex;align-items:center;gap:8px;} .exec-row-bar > div{flex:1;height:6px;background:#eef2f7;border-radius:100px;overflow:hidden;} .exec-row-fill{height:100%;background:var(--primary,#0f4a42);border-radius:100px;transition:width .3s;display:block;} .exec-row-pct{font-size:11px;font-weight:800;color:var(--primary,#0f4a42);min-width:32px;} .exec-row-end{display:flex;align-items:center;gap:8px;flex-shrink:0;} .exec-row-due{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#475569;background:#f1f5f9;border-radius:100px;padding:4px 10px;white-space:nowrap;} .exec-row-due.overdue{background:#fdecec;color:#b03030;} .exec-row-chev{border:none;background:none;color:#94a3b8;cursor:pointer;padding:4px;display:inline-flex;transition:transform .15s;} .exec-row.open .exec-row-chev{transform:rotate(180deg);} .exec-exp{border-top:1px dashed var(--border,#e2e8f0);padding:12px 14px;background:#fcfdfd;} .exec-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;} .exec-st-sel{border:1.5px solid var(--border,#e2e8f0);border-radius:8px;padding:6px 10px;font-family:inherit;font-size:12px;font-weight:700;background:#fff;cursor:pointer;} .exec-pct-wrap{display:flex;align-items:center;gap:8px;flex:1;min-width:150px;} .exec-pct-wrap input[type=range]{flex:1;accent-color:var(--primary,#0f4a42);} .exec-pct{font-size:12.5px;font-weight:800;color:var(--primary,#0f4a42);min-width:40px;text-align:center;} .exec-save-btn{padding:6px 18px !important;font-size:12px !important;} /* chat */ .exec-chat-msgs{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:2px;} .exec-chat-empty{text-align:center;font-size:12px;color:var(--text-muted,#94a3b8);padding:8px 0;} .exec-msg{display:flex;} .exec-msg.mine{justify-content:flex-end;} .exec-msg-bubble{max-width:82%;background:#f1f5f9;border-radius:12px;border-start-start-radius:4px;padding:8px 12px;} .exec-msg.mine .exec-msg-bubble{background:#e7f3f0;border-radius:12px;border-start-end-radius:4px;} .exec-msg-text{font-size:13px;line-height:1.7;color:#0f172a;white-space:pre-wrap;word-break:break-word;} .exec-msg-state{display:inline-block;font-size:10.5px;font-weight:800;color:var(--primary,#0f4a42);background:#fff;border:1px solid #d8e6e2;border-radius:100px;padding:1px 9px;margin-top:5px;} .exec-msg-meta{font-size:10px;color:#94a3b8;margin-top:4px;} .exec-chat-input{display:flex;gap:8px;margin-top:10px;} .exec-chat-input .form-control{flex:1;} .exec-send-btn{width:40px;height:40px;flex-shrink:0;border:none;border-radius:10px;background:var(--primary,#0f4a42);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;} .exec-send-btn:hover{opacity:.92;} [dir="rtl"] .exec-send-btn svg{transform:scaleX(-1);} /* add/edit form */ .exec-form{border:1.5px dashed var(--border,#e2e8f0);border-radius:12px;padding:14px;margin-top:10px;background:#f8fafc;} .exec-form-grid{display:grid;grid-template-columns:2fr 1.5fr 1fr;gap:10px;} .exec-field label{display:block;font-size:11px;font-weight:800;color:#475569;margin-bottom:5px;} .exec-form-btns{display:flex;gap:8px;margin-top:12px;} @media(max-width:640px){ .exec-form-grid{grid-template-columns:1fr;} /* row1: icon+title/progress · row2: badge/due/⋮/chevron — wrapping, never clipped */ .exec-row-head{flex-wrap:wrap;gap:10px;padding:12px;} .exec-row-mid{flex:1 1 0;min-width:0;} .exec-row-end{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:6px;} .exec-row-end .arm-ovf{margin-inline-start:auto;} } /* sidebar secondary tier: quiet items under a divider (Profile, Archive) */ .sidebar-secondary{margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);} .sidebar-secondary .sidebar-link{font-size:12.5px;padding:8px 18px;color:rgba(255,255,255,.55);} .sidebar-secondary .sidebar-link:hover{color:rgba(255,255,255,.85);} .sidebar-secondary .sidebar-link.active{color:#fff;} /* shared member/attendee chips — previously defined per-page (board/assembly/ committee templates); the Archive renders minutes details too and needs them */ .bv-chips{display:flex;flex-wrap:wrap;gap:6px;} .bv-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--text-muted);background:#f6f8fa;border:1px solid var(--border);border-radius:100px;padding:3px 10px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} .bv-count-pill{font-size:11px;font-weight:700;background:var(--primary-light,#e8f5f3);color:var(--primary);border-radius:100px;padding:2px 10px;} /* smooth cross-page transitions (View Transitions API — Chrome/Edge/Safari; older browsers simply navigate normally) */ @view-transition{navigation:auto;} ::view-transition-old(root){animation-duration:.18s;} ::view-transition-new(root){animation-duration:.22s;} /* skip transitions when closing overlays for bfcache snapshots */ .no-anim { transition:none !important; }