/* SERUMPUN Green and White theme - 2026-10-05
   Presentation only. Keep validation, permissions, status colours and print output intact.
   Load after existing styles. No external fonts or scripts.
*/
@media screen {
  :root {
    --sr-orange: #15803d;
    --sr-orange-dark: #166534;
    --sr-yellow: #dcfce7;
    --sr-ink: #14532d;
    --sr-soft: #f0fdf4;
    --sr-line: #bbf7d0;
    --navy: #166534;
    --blue: #15803d;
    --sky: #f0fdf4;
    --orange: #dcfce7;
    --ink: #14532d;
    --soft: #f8fcf9;
    --text: #292524;
    --line: #d7e8dc;
    --muted: #607368;
    --ui-navy: #166534;
    --ui-blue: #15803d;
    --ui-blue2: #16a34a;
    --ui-bg: #f8fcf9;
    --ui-text: #292524;
    --ui-muted: #607368;
    --ui-line: #d7e8dc;
    --ui-shadow: 0 12px 35px rgba(22,101,52,.07);
  }
  body { background-color: #f8fcf9; }
  body > aside {
    background: linear-gradient(180deg,#166534 0%,#15803d 62%,#166534 100%) !important;
    color: #fff !important;
    box-shadow: 8px 0 28px rgba(22,101,52,.12) !important;
  }
  body > aside .logo, body > aside .logo span, body > aside .logo small,
  body > aside .logout, body > aside nav a, body > aside .panel-nav-head {
    color: #fff !important;
  }
  body > aside .logo small { opacity: .9; }
  body > aside .logo > b, .brand-mark {
    background: #f0fdf4 !important;
    color: #166534 !important;
    box-shadow: none !important;
  }
  body > aside .panel-nav-head { background: transparent !important; }
  body > aside nav a[href*="private_documents"] { background: #14532d !important; box-shadow: none !important; }
  body > aside .panel-nav-section.open .panel-nav-head,
  body > aside nav a:hover, body > aside .panel-nav-head:hover {
    background: #14532d !important;
    color: #fff !important;
  }
  body > aside .panel-nav-items a.active,
  body > aside .panel-nav-direct.active,
  body > aside nav a.active {
    background: #dcfce7 !important;
    color: #14532d !important;
    box-shadow: 0 4px 12px rgba(20,83,45,.15) !important;
  }
  body > aside .panel-nav-items a:hover { background: #14532d !important; }
  body > aside .panel-nav-items { border-left-color: rgba(220,252,231,.45) !important; }
  body > aside .panel-nav-subtitle, body > aside .nav-label { color: #dcfce7 !important; }
  /* Neutral headings are dark brown; semantic status text is left untouched. */
  .app header h2, .header-title h2, .header-greeting b,
  .app main h1, .app main h2, .app main h3,
  .brand b, .section-head h2, .service-grid h3, .serumpun-module-heading h2,
  .serumpun-module-card h3, .esurat-panel h1, .profile-heading h3 {
    color: #14532d !important;
  }
  .user-chip > span, .summary-icon, .module-glyph,
  .access-avatar, .module-icon, .profile-heading-icon, .profile-role,
  .serumpun-role, .year-badge {
    background: #dcfce7 !important;
    color: #166534 !important;
  }
  .summary-card:first-child { background: #f0fdf4 !important; }
  .summary-card:first-child .summary-icon { background: #bbf7d0 !important; color: #166534 !important; }
  .hero, .private-hero, .serumpun-dashboard-hero, .attendance-hero,
  .page-title, .modern-upload-head, .modern-upload-head.media,
  .upload-drive-banner, .search-hero {
    background: linear-gradient(115deg,#166534 0%,#15803d 68%,#166534 100%) !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(22,101,52,.13) !important;
  }
  .hero h1, .private-hero h1, .serumpun-dashboard-hero h1, .attendance-hero h1,
  .page-title h1, .modern-upload-head h3, .upload-drive-banner h3,
  .search-hero h1 { color: #fff !important; }
  .hero p, .private-hero p, .serumpun-dashboard-hero p, .attendance-hero p,
  .page-title p, .modern-upload-head p, .upload-drive-banner p,
  .hero-card small, .hero-brand small { color: #f0fdf4 !important; }
  .hero .eyebrow, .private-hero .eyebrow, .serumpun-dashboard-hero .eyebrow,
  .hero-copy > span, .page-title > span { color: #bbf7d0 !important; }
  .hero-actions a:first-child { background: #dcfce7 !important; color: #14532d !important; border-color: #dcfce7 !important; }
  .privacy-badge { color: #fff !important; background: rgba(255,255,255,.14) !important; }
  /* Primary controls and focus ring. Preserve sizing, layout and disabled states. */
  .app main button, .login-submit, .profile-save, .btn-primary, .esurat-btn,
  .attendance-primary, .submit-attendance, .primary, .portal-btn,
  .cert-btn, .sl-btn, .zoom-box .zbtn, .zoom-box button,
  .zoom-link-button, .zoom-action, .btn-small, .doc-card > a,
  .preset-filter button, .reset-card button, .wrap .btn,
  .form-panel button, .upload-tab.active, .participant-form button[type="submit"] {
    background: #15803d !important;
    color: #fff !important;
    border-color: #15803d !important;
    box-shadow: none !important;
  }
  .app main button:hover, .btn-primary:hover, .primary:hover, .portal-btn:hover,
  .cert-btn:hover, .sl-btn:hover, .esurat-btn:hover, .btn-small:hover,
  .login-submit:hover, .profile-save:hover, .zoom-link-button:hover {
    background: #166534 !important;
    color: #fff !important;
  }
  .upload-choice { background: #f0fdf4 !important; border-color: #bbf7d0 !important; }
  .modern-upload-card .info-box, .form-panel .info-box,
  .modern-upload-card .file-drop, .requirements-box, .security-code-box {
    background: #f0fdf4 !important;
    border-color: #a7cdb3 !important;
    color: #285b3d !important;
  }
  input:focus, select:focus, textarea:focus, [contenteditable="true"]:focus {
    border-color: #15803d !important;
    outline-color: #15803d;
    box-shadow: 0 0 0 3px rgba(21,128,61,.15) !important;
  }
  input[type="checkbox"], input[type="radio"] { accent-color: #15803d; }
  a:focus-visible, button:focus-visible { outline: 3px solid #166534; outline-offset: 3px; }
  .pagination-links a.active, .pagination-links a:hover, .archive-pagination a.active,
  .pagination .active, .status-pill.active {
    background: #dcfce7 !important;
    color: #14532d !important;
    border-color: #86efac !important;
    box-shadow: none !important;
  }
  .service-card.blue .icon, .service-card.blue .number,
  .quick b, .module-open, .section-head > a, .card-action,
  .profile-section-title b, .event-label { color: #166534 !important; }
  .service-card.blue .icon { background: #dcfce7 !important; }
  .serumpun-module-card:hover { border-color: #a7cdb3 !important; box-shadow: 0 14px 30px rgba(22,101,52,.12) !important; }
  .topbar, body > footer { background: #166534 !important; color: #f0fdf4 !important; }
  .copyright:not(small) { background-color: #14532d !important; color: #dcfce7 !important; }
  .news-thumb { background: linear-gradient(135deg,#166534,#15803d) !important; }
  .site-header nav a:not(.portal-btn):hover { color: #166534 !important; }
  .site-header button { background: #dcfce7 !important; color: #166534 !important; }
  .running-text-label { background: #15803d !important; color: #fff !important; }
  .running-text-bkpsdm { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #14532d !important; }
  /* Existing public Zoom promotional panel uses inline colours. */
  section[aria-label="Zoom Meeting"] > div { background: linear-gradient(115deg,#166534,#15803d) !important; }
  section[aria-label="Zoom Meeting"] > div h2 { color: #fff !important; }
  section[aria-label="Zoom Meeting"] > div p { color: #f0fdf4 !important; }
  section[aria-label="Zoom Meeting"] > div > a { background: #dcfce7 !important; color: #14532d !important; }
  /* Login: green photo overlay, unchanged Natuna and institutional logos. */
  .login-body, .ref-login { background-color: #f0fdf4 !important; }
  .login-body::before { background: linear-gradient(110deg,rgba(20,83,45,.82),rgba(21,128,61,.45),rgba(20,83,45,.72)) !important; }
  .brand-panel, .ref-login .brand-panel {
    background: linear-gradient(105deg,rgba(20,83,45,.9),rgba(21,128,61,.72)),url('images/natuna-bg.jpg') center/cover no-repeat !important;
    color: #fff !important;
  }
  .brand-panel::before { background: linear-gradient(180deg,transparent 55%,rgba(20,83,45,.4)) !important; }
  .ref-login .brand-copy h1 em { color: #dcfce7 !important; }
  .ref-login .brand-kicker { color: #bbf7d0 !important; }
  .ref-login .brand-copy h1, .ref-login .brand-copy h1 span { color: #fff !important; }
  .ref-login .brand-copy p, .ref-login .natuna-sign small { color: #f0fdf4 !important; }
  .ref-login .login-features div:first-child b { background: #15803d !important; }
  .ref-login .portal-label, .ref-login .login-card h3,
  .ref-login .security-code-box a, .ref-login .security-code-box strong,
  .ref-login .public-service-links a { color: #166534 !important; }
  .ref-login .login-card h2, .ref-login .login-field-label { color: #14532d !important; }
  .ref-login .login-card-accent { border-top-color: #16a34a !important; border-right-color: #16a34a !important; }
  .ref-login .security-code-box { background: #f0fdf4 !important; border-color: #a7cdb3 !important; }
  .ref-login .icon-field:focus-within { border-color: #15803d !important; box-shadow: 0 0 0 3px rgba(21,128,61,.15) !important; }
  .ref-login .login-submit { background: #15803d !important; color: #fff !important; }
  .ref-login .login-submit:hover { background: #166534 !important; }
  .ref-login .icon-field > span { color: #166534 !important; }
  .ref-login .public-service-links span { background: #dcfce7 !important; }
  /* Attendance / password reset / certificate verification standalone pages. */
  .attendance-public { background: linear-gradient(145deg,#f0fdf4,#fffbeb) !important; color: #14532d !important; }
  .attendance-public header { background: linear-gradient(110deg,#166534,#15803d) !important; }
  .attendance-public header span { color: #f0fdf4 !important; }
  .attendance-public .submit-attendance { background: #15803d !important; color: #fff !important; }
  .reset-card h1, .wrap h1 { color: #14532d !important; }
  .reset-card a { color: #166534 !important; }
  .cert-note, .zoom-note, .sl-notice { background: #f0fdf4 !important; color: #14532d !important; }
  /* Keep success/danger/WhatsApp controls distinct. Never change status badges. */
  .app main button.danger, .btn-primary.db-danger,
  .zoom-box button[style*="#dc2626"], .zoom-box button[style*="#ef4444"],
  .zoom-delete-participant { background: #b91c1c !important; color: #fff !important; border-color: #b91c1c !important; }
  .zoom-link-button.zoom-link-wa, .ref-login .login-wa { background: #15803d !important; color: #fff !important; }
  .app main .panel-nav-head, .password-toggle, .profile-form .password-input button {
    background: transparent !important; color: #607368 !important; border-color: transparent !important; box-shadow: none !important;
  }
  .app main button:disabled, .zoom-box button:disabled, .login-submit:disabled { cursor: not-allowed; }
}

/* Website public refinements. Isolated from admin layouts and print documents. */
@media screen {
  .sr-public {
    --sr-site-width: 1240px;
    color: #163b28;
    background: #fff;
    font-family: "Segoe UI",Inter,Arial,sans-serif;
  }
  .sr-public .topbar {
    padding: 10px max(4vw,24px);
    background: #14532d !important;
    color: #e2f9ea !important;
    letter-spacing: .08em;
    font-size: 11px;
  }
  .sr-public .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #e4efe8;
    box-shadow: 0 6px 24px rgba(20,83,45,.06);
    min-height: 92px !important;
    padding-inline: max(4vw,24px);
  }
  .sr-public .site-header .brand { flex-shrink: 0; gap: 12px; }
  .sr-public .site-header .brand b { font-size: 24px; letter-spacing: .04em; color: #14532d !important; }
  .sr-public .site-header .brand span { color: #526b5d; font-size: 12px; }
  .sr-public .site-header .brand .serumpun-brand { width: 50px; height: 58px; object-fit: contain; }
  .sr-public .site-header nav { margin: 0; gap: 6px !important; }
  .sr-public .site-header nav a { padding: 9px 10px; color: #305442; border-radius: 9px; font-size: 12px !important; }
  .sr-public .site-header nav a:hover { background: #f0fdf4; color: #166534 !important; }
  .sr-public .site-header nav .portal-btn { padding: 12px 17px; color: #fff !important; background: #15803d !important; box-shadow: 0 5px 14px #15803d18; }
  .sr-public .running-text-bkpsdm { margin: 0 auto !important; border-radius: 0 !important; max-width: none; border: 0 !important; border-bottom: 1px solid #dcf0e3 !important; }
  .sr-public .running-text-label { padding: 13px 22px; letter-spacing: .05em; }
  .sr-public .hero, .sr-public .hero-slider {
    min-height: 470px;
    border-radius: 0 0 38px 38px;
    background: #14532d;
    box-shadow: none !important;
  }
  .sr-public .hero {
    min-height: 520px;
    padding: 70px max(6vw,30px) 80px;
    grid-template-columns: minmax(0,1.6fr) minmax(220px,.6fr);
    gap: 50px;
    background: linear-gradient(90deg,rgba(5,46,22,.97),rgba(20,83,45,.88) 58%,rgba(20,83,45,.50)),url('images/natuna-bg.jpg') center/cover no-repeat !important;
  }
  .sr-public .hero h1 { font-size: clamp(32px,4vw,58px); line-height: 1.12; letter-spacing: -.035em; max-width: 790px; }
  .sr-public .hero p { max-width: 680px; font-size: 17px; }
  .sr-public .hero-copy > span, .sr-public .banner-copy > span {
    display: inline-block;
    padding: 9px 12px;
    color: #dcfce7 !important;
    border: 1px solid #bbf7d04d;
    border-radius: 30px;
    background: #ffffff0b;
    font-size: 11px;
    letter-spacing: .08em;
  }
  .sr-public .hero .primary, .sr-public .banner-copy .primary {
    background: #fff !important;
    color: #166534 !important;
    padding: 14px 22px;
    border: 0;
    box-shadow: 0 8px 20px #052e1626;
    font-weight: 750;
  }
  .sr-public .hero .primary:hover, .sr-public .banner-copy .primary:hover { background: #dcfce7 !important; color: #14532d !important; }
  .sr-public .hero-card { background: #ffffff0d; border: 1px solid #bbf7d050; border-radius: 26px; padding: 32px 24px; box-shadow: 0 16px 40px #052e161f; }
  .sr-public .hero-card.serumpun-hero img { width: 130px; height: 130px; object-fit: contain; padding: 12px; background: #fff; border-radius: 24px; }
  .sr-public .hero-card b { color: #fff; letter-spacing: .08em; }
  .sr-public .hero-card small { color: #dcfce7 !important; line-height: 1.7; margin-top: 9px; }
  .sr-public .hero-slider { height: min(600px,50vw); min-height: 460px; }
  .sr-public .banner-slide { isolation: isolate; }
  .sr-public .banner-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,rgba(5,46,22,.82),rgba(20,83,45,.52) 58%,rgba(20,83,45,.08));
  }
  .sr-public .banner-intro { background: radial-gradient(ellipse at 95% 20%,#4ade8030,transparent 52%),linear-gradient(120deg,#14532d,#166534) !important; }
  .sr-public .banner-copy { max-width: 880px; padding-right: 30px; margin-left: max(6vw,30px); }
  .sr-public .banner-copy h1 { color: #fff; font-size: clamp(32px,4vw,58px); line-height: 1.13; letter-spacing: -.035em; margin: 20px 0; }
  .sr-public .banner-copy p { color: #effdf4; font-size: 17px; line-height: 1.75; }
  .sr-public .banner-controls button { background: #ffffff18; border-color: #ffffff70; color: #fff; width: 44px; height: 44px; }
  .sr-public .banner-controls button:hover { background: #dcfce7; color: #14532d; }
  .sr-public .quick {
    max-width: var(--sr-site-width);
    margin: 26px auto 14px !important;
    border: 1px solid #dcece1;
    box-shadow: 0 12px 32px rgba(20,83,45,.06);
    border-radius: 20px;
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .sr-public .quick a { padding: 24px; align-items: center; border-color: #e4efe8; gap: 16px; }
  .sr-public .quick a b { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; font-size: 24px; border-radius: 14px; color: #166534 !important; background: #f0fdf4; }
  .sr-public .quick a:hover { background: #f7fcf9; }
  .sr-public .quick small { color: #637d6d; line-height: 1.5; }
  .sr-public .section { max-width: 1360px; padding-block: 55px; }
  .sr-public .section-head { align-items: center; gap: 16px; }
  .sr-public .section-head span { color: #15803d; font-size: 11px; letter-spacing: .12em; }
  .sr-public .section-head h2 { font-size: clamp(26px,3vw,36px); letter-spacing: -.025em; color: #14532d !important; }
  .sr-public .section-head > a { padding: 10px 15px; background: #f0fdf4; border-radius: 10px; color: #166534 !important; font-size: 13px; text-decoration: none; }
  .sr-public .news-grid { gap: 24px; }
  .sr-public .news-grid article { border: 1px solid #e1ece5; border-radius: 21px; box-shadow: 0 10px 28px rgba(20,83,45,.05); transition: transform .2s ease,box-shadow .2s ease; }
  .sr-public .news-grid article:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(20,83,45,.10); }
  .sr-public .news-image, .sr-public .news-thumb { height: 210px !important; }
  .sr-public .news-grid article > div:last-child { padding: 25px; }
  .sr-public .news-grid h3 { font-size: 19px; line-height: 1.45; color: #163b28; }
  .sr-public .news-grid h3 a { text-decoration: none; }
  .sr-public .news-grid p { color: #637d6d; font-size: 14px; line-height: 1.7; }
  .sr-public .card-action { color: #166534 !important; font-size: 13px; }
  .sr-public .section.alt { max-width: none; background: #f3faf5; border-top: 1px solid #e7f1ea; border-bottom: 1px solid #e7f1ea; }
  .sr-public .service-grid { gap: 22px; }
  .sr-public .service-grid > a { padding: 30px; border-radius: 22px; border-color: #dcece1; box-shadow: 0 10px 28px rgba(20,83,45,.04); transition: transform .2s ease,box-shadow .2s ease; }
  .sr-public .service-grid > a:hover { border-color: #9bc9ac; box-shadow: 0 16px 30px rgba(20,83,45,.08); }
  .sr-public .service-grid > a > b { display: grid; place-items: center; width: 52px; height: 52px; background: #f0fdf4; color: #166534 !important; border-radius: 16px; }
  .sr-public .service-grid > a h3 { margin-top: 22px; font-size: 21px; color: #14532d !important; }
  .sr-public .service-grid > a p { color: #637d6d; font-size: 14px; line-height: 1.75; }
  .sr-public .service-grid > a > span { color: #166534; display: block; margin-top: 22px; }
  .sr-public .empty-state { background: #f7fcf9; color: #547360; border-color: #b6d6c1; border-radius: 21px; }
  .sr-public .empty-state > span { color: #15803d; }
  .sr-public .empty-state h3 { color: #14532d; }
  .sr-public section[aria-label="Zoom Meeting"] { max-width: 1288px !important; margin: 28px auto !important; }
  .sr-public section[aria-label="Zoom Meeting"] > div { border-radius: 22px !important; background: linear-gradient(115deg,#166534,#15803d) !important; box-shadow: 0 12px 26px rgba(20,83,45,.10) !important; }
  .sr-public section[aria-label="Zoom Meeting"] > div > a { background: #fff !important; color: #166534 !important; padding: 13px 20px !important; }
  .sr-public .page-title, .sr-public .public-heading { background: linear-gradient(120deg,#14532d,#15803d) !important; border-radius: 0 0 28px 28px; }
  .sr-public .public-heading p { color: #e2f9ea; }
  .sr-public .content-card { border-color: #dcece1; box-shadow: 0 8px 26px rgba(20,83,45,.05); }
  .sr-public .content-card-mark { background: #f0fdf4; color: #166534; }
  .sr-public .content-card-body h2 a, .sr-public .content-card-body a { color: #14532d; }
  .sr-public .download-primary, .sr-public .download-pages a.active { background: #15803d; color: #fff; border-color: #15803d; }
  .sr-public .download-symbol { background: #f0fdf4; color: #166534; }
  .sr-public .service-choice-card { border-color: #dcece1; border-radius: 20px; box-shadow: 0 10px 28px rgba(20,83,45,.05); }
  .sr-public .service-choice-admin .service-choice-icon { background: #dcfce7; color: #166534; }
  .sr-public .service-choice-card h2 { color: #14532d; }
  .sr-public > footer { background: #14532d !important; color: #effdf4 !important; padding-block: 50px; border-radius: 30px 30px 0 0; }
  .sr-public > footer b { font-size: 18px; }
  .sr-public > footer p { color: #d0ead9; line-height: 1.8; font-size: 14px; max-width: 440px; }
  .sr-public > .copyright { background: #052e16 !important; color: #bbd8c6 !important; padding: 18px; }
  @media(max-width:1050px) {
    .sr-public .site-header { flex-wrap: wrap; gap: 12px; }
    .sr-public .site-header nav { flex: 1 1 100%; justify-content: flex-start !important; }
  }
  @media(max-width:850px) {
    .sr-public .site-header { min-height: 82px !important; padding-inline: 20px; flex-wrap: nowrap; }
    .sr-public .site-header nav { top: 100%; flex-direction: column; align-items: stretch; padding: 16px 20px; border-bottom: 1px solid #dcece1; box-shadow: 0 15px 28px #14532d12; }
    .sr-public .site-header nav a { font-size: 14px !important; padding: 12px; }
    .sr-public .site-header nav .portal-btn { margin-left: 0; text-align: center; }
    .sr-public .hero { grid-template-columns: 1fr; padding: 48px 24px; gap: 30px; min-height: 0; border-radius: 0 0 25px 25px; }
    .sr-public .hero-card { max-width: 420px; margin-inline: auto; }
    .sr-public .quick { margin-inline: 20px !important; }
    .sr-public .quick a { padding: 20px 16px; }
  }
  @media(max-width:650px) {
    .sr-public .topbar { font-size: 10px; padding: 9px 20px; }
    .sr-public .site-header .brand b { font-size: 20px; }
    .sr-public .site-header .brand span { font-size: 11px; }
    .sr-public .hero-slider { height: 510px; min-height: 0; border-radius: 0 0 25px 25px; }
    .sr-public .banner-copy { margin-left: 24px; padding: 25px 24px 60px 0; }
    .sr-public .banner-copy h1 { font-size: 34px; }
    .sr-public .banner-copy p { font-size: 15px; line-height: 1.65; }
    .sr-public .quick { grid-template-columns: 1fr; margin: 22px 20px 8px !important; }
    .sr-public .quick a { padding: 18px 20px; border-right: 0; border-bottom: 1px solid #e4efe8; }
    .sr-public .quick a:last-child { border-bottom: 0; }
    .sr-public .section { padding: 38px 20px; }
    .sr-public .section-head { align-items: flex-start; }
    .sr-public .section-head > a { font-size: 12px; padding: 9px 11px; }
    .sr-public .news-grid, .sr-public .service-grid { grid-template-columns: 1fr; }
    .sr-public .news-grid { gap: 18px; }
    .sr-public .service-grid > a { padding: 25px; }
    .sr-public > footer { padding: 35px 24px; grid-template-columns: 1fr; gap: 18px; border-radius: 24px 24px 0 0; }
  }
  @media(prefers-reduced-motion:reduce) {
    .sr-public .news-grid article, .sr-public .service-grid > a { transition: none; }
    .sr-public .news-grid article:hover, .sr-public .service-grid > a:hover { transform: none; }
  }
}