/* --------------------------------------------------------------- Jadwal Kuliah — gaya "Boarding Pass" 4 tema tersedia: Midnight Cabin (default), Daybreak, Warm Vellum, Sage Grove. Tema aktif ditentukan oleh atribut data-theme di . --------------------------------------------------------------- */ /* --------------------------------------------------------------- TEMA — 4 palet siap pilih (data-theme di ) • midnight-cabin : Tosca dalam + krem, aksen ungu (default) • daybreak : Pastel biru langit Polibatam, aksen oranye • warm-vellum : Krem hangat, aksen oranye • sage-grove : Sage/mint tenang, aksen terracotta --------------------------------------------------------------- */ :root, [data-theme="midnight-cabin"] { --tosca-deep: #0d4d4c; --tosca-mid: #0a3a39; --tosca-line: #2a6867; --tosca-soft: #5eead4; --tosca-muted: #7fb2af; --purple: #6d3fbf; --purple-soft: #a58ad9; --paper: #faf6ee; --paper-dark: #f0ebdd; --paper-line: #b8afa0; --ink: #0a3a39; --ink-soft: #7a7264; --accent: #fc671a; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } [data-theme="daybreak"] { --tosca-deep: #eaf3f8; --tosca-mid: #e0e7f0; --tosca-line: #c7d5e2; --tosca-soft: #1e376c; --tosca-muted: #6b7385; --purple: #fc671a; --purple-soft: #ffb894; --paper: #ffffff; --paper-dark: #1e376c; --paper-line: #c7d5e2; --ink: #1e376c; --ink-soft: #6b7385; --accent: #fc671a; } [data-theme="warm-vellum"] { --tosca-deep: #f4ecd7; --tosca-mid: #ebe0c6; --tosca-line: #c9b789; --tosca-soft: #3a2c17; --tosca-muted: #8a7654; --purple: #fc671a; --purple-soft: #ffb894; --paper: #ffffff; --paper-dark: #3a2c17; --paper-line: #c9b789; --ink: #3a2c17; --ink-soft: #8a7654; --accent: #fc671a; } [data-theme="sage-grove"] { --tosca-deep: #e8efe4; --tosca-mid: #d4dec9; --tosca-line: #b8c5b0; --tosca-soft: #2e3a2f; --tosca-muted: #7a857b; --purple: #b45a2a; --purple-soft: #d69077; --paper: #ffffff; --paper-dark: #2e3a2f; --paper-line: #b8c5b0; --ink: #2e3a2f; --ink-soft: #7a857b; --accent: #b45a2a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); color: var(--paper-dark); background: var(--tosca-deep); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } button, input, select, textarea { font: inherit; color: inherit; } [hidden] { display: none !important; } .app-shell { max-width: 720px; margin: 0 auto; padding: 22px 14px 60px; } /* --------- Header boarding pass --------- */ .hero { padding: 0; background: transparent; color: inherit; box-shadow: none; border-radius: 0; margin-bottom: 24px; display: block; } .compact-hero { margin-bottom: 24px; } .hero-minimal { display: block; } .hero-eyebrow-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } .hero-right { display: flex; align-items: center; gap: 8px; } .hero h1 { font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin: 0; color: var(--paper-dark); } .semester-label { display: inline-block; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--tosca-soft); border: 1px solid var(--tosca-soft); padding: 3px 8px; background: transparent; border-radius: 0; margin: 0; } .semester-label::before { content: ''; } .hero::after { content: ''; display: block; border-bottom: 1px solid var(--tosca-soft); opacity: 0.35; margin-bottom: 12px; } .hero-teacher { display: block; margin-bottom: 4px; } .hero-eyebrow { font-size: 8px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: var(--tosca-muted); margin: 0 0 2px; } .hero-teacher-name { font-size: 22px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--paper-dark); margin: 0 0 6px; line-height: 1.15; } .hero-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 10px; color: var(--tosca-muted); flex-wrap: wrap; } .admin-link { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tosca-muted); text-decoration: none; padding: 3px 8px; border: 1px solid var(--tosca-line); } .admin-link:hover { color: var(--paper); border-color: var(--tosca-soft); } /* --------- Mode switcher (Dosen / Kelas / Ruangan) --------- */ .mode-switcher { display: flex; gap: 0; margin-bottom: 22px; border: 1px solid var(--tosca-line); } .mode-tab { flex: 1; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 8px; background: transparent; color: var(--tosca-muted); border: 0; border-right: 1px solid var(--tosca-line); cursor: pointer; border-radius: 0; transition: background 120ms, color 120ms; } .mode-tab:last-child { border-right: 0; } .mode-tab:hover { color: var(--paper-dark); } .mode-tab.active { background: var(--purple); color: var(--paper); } /* --------- Toolbar: cari, pilih, cetak --------- */ .toolbar { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; margin-bottom: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: end; } .toolbar-wide { grid-column: 1 / -1; } .field-group { display: flex; flex-direction: column; gap: 6px; } .field-group label { font-size: 8px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tosca-muted); } .field-group input, .field-group select { width: 100%; padding: 9px 0; background: transparent; border: 0; border-bottom: 1px solid var(--tosca-line); border-radius: 0; font-size: 14px; font-weight: 600; color: var(--paper-dark); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 20px; } .field-group input { background-image: none; padding-right: 0; } .field-group input:focus, .field-group select:focus { outline: none; border-bottom-color: var(--tosca-soft); border-bottom-width: 2px; padding-bottom: 8px; } .field-group input::placeholder { color: var(--tosca-muted); font-weight: 400; } .field-group select option { background: var(--tosca-mid); color: var(--paper-dark); } .actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .btn { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 9px 14px; border: 1px solid var(--tosca-soft); background: transparent; color: var(--tosca-soft); cursor: pointer; border-radius: 0; transition: background 120ms, color 120ms; } .btn:hover { background: var(--tosca-soft); color: var(--tosca-deep); } .btn.primary { background: var(--purple); border-color: var(--purple); color: var(--paper); } .btn.primary:hover { background: var(--purple-soft); border-color: var(--purple-soft); color: var(--tosca-deep); } .btn.secondary { background: transparent; } .btn.ghost-btn { border: 1px solid var(--tosca-line); color: var(--tosca-muted); padding: 6px 10px; font-size: 9px; } .btn.ghost-btn:hover { background: transparent; color: var(--paper); border-color: var(--tosca-soft); } /* --------- Ringkasan angka --------- */ .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px 24px; margin-bottom: 26px; padding-top: 18px; border-top: 1px solid var(--tosca-line); } .summary-card { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .summary-label { font-size: 8px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tosca-muted); } .summary-card strong { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--paper-dark); line-height: 1.1; font-variant-numeric: tabular-nums; } .summary-card-timestamp strong { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; } /* --------- Navigasi hari --------- */ /* >>> BENTROK-INFO: ringkasan mata kuliah "Proposal Tugas/Proyek Akhir" — tidak ditampilkan sebagai tiket jadwal per hari karena tidak punya jam khusus (berlangsung sepanjang semester), cukup satu ringkasan per dosen. */ .proposal-summary-panel { margin-bottom: 22px; } .proposal-summary-panel h2 { font-size: 8px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tosca-muted); margin: 0 0 8px; } .proposal-summary-list { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--purple-soft); background: var(--paper); padding: 10px 12px; } .proposal-row { padding-bottom: 8px; border-bottom: 1px dashed var(--paper-line); } .proposal-row:last-child { padding-bottom: 0; border-bottom: none; } .proposal-row-head { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; } .proposal-row-name { color: var(--ink); font-size: 11px; font-weight: 700; } .proposal-row-detail { color: var(--ink-soft); font-size: 11px; font-weight: 600; } .proposal-row-tag { flex-shrink: 0; font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: #fff; background: var(--purple); padding: 3px 6px; } /* <<< BENTROK-INFO */ .day-tabs-panel { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; margin-bottom: 22px; } .day-tabs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .day-tabs-header h2 { font-size: 8px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tosca-muted); margin: 0; } .day-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .day-tabs::-webkit-scrollbar { display: none; } .day-tab { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 12px; background: transparent; color: var(--tosca-muted); border: 1px solid var(--tosca-line); cursor: pointer; white-space: nowrap; border-radius: 0; } .day-tab:hover { color: var(--paper-dark); border-color: var(--tosca-muted); } .day-tab.active { color: var(--paper); background: var(--purple); border-color: var(--purple); } /* --------- Kelompok hari (saat "Semua Jadwal") --------- */ .schedule-wrapper { display: block; } .schedule-wrapper.all-days .day-column + .day-column { margin-top: 48px; padding-top: 22px; border-top: 2px solid var(--tosca-soft); } .schedule-wrapper.all-days .day-column .day-header { border-bottom: none; padding-bottom: 0; margin-bottom: 20px; } .schedule-wrapper.all-days .day-column .day-title { font-size: 22px; letter-spacing: 0.14em; color: var(--tosca-soft); } .schedule-wrapper.all-days .day-column .day-subtitle { font-size: 10px; color: var(--tosca-muted); } .schedule-wrapper.all-days .day-column .badge.day-count { font-size: 10px; color: var(--paper-dark); } .day-column { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; } .day-header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; margin-bottom: 16px; border-bottom: 1px dashed var(--tosca-line); } .day-title { font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tosca-soft); margin: 0; } .day-subtitle { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tosca-muted); margin: 3px 0 0; } .badge.day-count { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--tosca-muted); background: transparent; padding: 0; border-radius: 0; } .day-body { display: flex; flex-direction: column; gap: 16px; } /* --------- Tiket (satu sesi = satu tiket) --------- */ .schedule-card { position: relative; background: var(--paper); color: var(--ink); border: 1px solid var(--tosca-mid); border-radius: 0; box-shadow: none; padding: 0; display: flex; min-height: 130px; overflow: visible; } /* Perforasi: lubang di atas dan bawah */ .schedule-card::before, .schedule-card::after { content: ''; position: absolute; left: 118px; width: 12px; height: 12px; background: var(--tosca-deep); border: 1.5px solid var(--tosca-soft); border-radius: 50%; } .schedule-card::before { top: -6px; } .schedule-card::after { bottom: -6px; } /* Stub kiri: jam Dari, durasi, jam Sampai */ .ticket-stub { width: 124px; padding: 14px 12px; border-right: 2px dashed var(--paper-line); display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; } .stub-block { display: block; } .micro-label { font-size: 7px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin-bottom: 3px; line-height: 1; } .stub-time { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; color: var(--ink); } .stub-duration { font-size: 9px; color: var(--purple); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; font-weight: 700; margin: 4px 0; } /* Body kanan: kode, kelas, mata kuliah, ruang */ .ticket-body { flex: 1; padding: 14px 14px 14px 18px; min-width: 0; } .ticket-topline { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 10px; } .ticket-topline > div { min-width: 0; } .ticket-topline .right { text-align: right; } .ticket-code { font-size: 17px; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--ink); } .ticket-class { font-size: 12px; font-weight: 700; color: var(--ink); } .ticket-subject { font-size: 14px; font-weight: 700; line-height: 1.25; color: #1a1a1a; margin-bottom: 10px; word-wrap: break-word; } .ticket-subject .subject-note { font-weight: 500; color: var(--ink-soft); font-style: italic; } .ticket-footer { border-top: 1px dashed var(--paper-line); padding-top: 6px; display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-soft); letter-spacing: 0.04em; gap: 8px; flex-wrap: wrap; } .ticket-footer .micro-label-inline { font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; margin-right: 2px; } /* Bentrok: batang oranye + badge */ .schedule-card.has-conflict { padding-left: 5px; background: linear-gradient(to right, var(--accent) 0, var(--accent) 5px, var(--paper) 5px); } .conflict-badge { position: absolute; top: 8px; right: 10px; background: var(--accent); color: #fff; font-size: 8px; padding: 2px 7px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; border-radius: 0; z-index: 2; } /* >>> BENTROK-INFO: kartu gabungan — beberapa sesi bentrok ditumpuk di satu kartu (satu rentang jam), bukan sebagai kartu terpisah berulang. */ .schedule-card.conflict-group .ticket-body.conflict-stack { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; } .conflict-entry { padding-bottom: 10px; border-bottom: 1px dashed var(--paper-line); } .conflict-entry:last-child { padding-bottom: 0; border-bottom: none; } /* <<< BENTROK-INFO */ /* >>> SHARING-LAB-INFO: label informasional "Sharing Lab" (Prodi TRM) — sengaja dibedakan dari .conflict-badge karena ini BUKAN bentrok. Ditaruh inline di baris status (Praktikum/Teori), BUKAN absolute di pojok kartu, supaya tidak pernah menutupi label "Dari" di stub jam kiri. */ .schedule-card.has-sharing { padding-left: 5px; background: linear-gradient(to right, var(--tosca-soft) 0, var(--tosca-soft) 5px, var(--paper) 5px); } .sharing-tag { display: inline-block; margin-left: 6px; color: var(--ink-soft); border: 1px solid var(--tosca-line); font-size: 7px; padding: 1px 5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; vertical-align: middle; } .schedule-card.has-sharing.night-session { background: linear-gradient(to right, var(--tosca-soft) 0, var(--tosca-soft) 5px, var(--tosca-mid) 5px); } /* <<< SHARING-LAB-INFO */ /* Slot kosong (jarang dipakai) */ .schedule-card.empty-slot { opacity: 0.4; } .schedule-card.empty-slot .ticket-subject { font-weight: 400; } /* --------------------------------------------------------------- TIKET MALAM (sesi mulai ≥ 17:00) Palet: latar dusty blue, teks navy — sedikit lebih pekat dari tiket siang tapi tidak invert total, supaya tetap serasi dgn latar pastel. --------------------------------------------------------------- */ .schedule-card.night-session { background: var(--tosca-mid); color: var(--paper-dark); border-color: var(--tosca-soft); } .schedule-card.night-session::before, .schedule-card.night-session::after { border-color: var(--tosca-soft); } .schedule-card.night-session .ticket-stub { border-right-color: var(--tosca-line); } .schedule-card.night-session .micro-label, .schedule-card.night-session .micro-label-inline { color: var(--tosca-muted); } .schedule-card.night-session .stub-time, .schedule-card.night-session .ticket-code, .schedule-card.night-session .ticket-class { color: var(--paper-dark); } .schedule-card.night-session .ticket-subject { color: var(--paper-dark); } .schedule-card.night-session .ticket-subject .subject-note { color: var(--tosca-muted); } .schedule-card.night-session .stub-duration { color: var(--purple); } .schedule-card.night-session .ticket-footer { border-top-color: var(--tosca-line); color: var(--tosca-muted); } .schedule-card.night-session .day-label-moon { opacity: 0.85; margin-left: 4px; } /* Bentrok pada tiket malam: gradient tetap oranye di kiri, latar tosca-mid */ .schedule-card.has-conflict.night-session { background: linear-gradient(to right, var(--accent) 0, var(--accent) 5px, var(--tosca-mid) 5px); } /* Pemisah jeda antar tiket: subtle */ .gap-separator { text-align: center; font-size: 8px; color: var(--tosca-muted); padding: 2px 0; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; } .gap-separator::before, .gap-separator::after { content: '· · · · ·'; color: var(--tosca-line); margin: 0 8px; } /* Hari kosong (tidak ada jadwal hari ini) */ .empty-state { padding: 32px 20px; border: 1px dashed var(--tosca-line); text-align: center; color: var(--tosca-muted); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } /* Empty banner */ .empty-banner { background: transparent; border: 1px dashed var(--tosca-line); border-radius: 0; box-shadow: none; padding: 44px 20px; text-align: center; font-size: 13px; color: var(--tosca-muted); letter-spacing: 0.02em; } /* --------- Footer kredit --------- */ .credit-footer { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--tosca-line); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .credit-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--paper-dark); transition: opacity 120ms; } .credit-link:hover { opacity: 0.85; } .credit-logo { height: 32px; width: auto; display: block; } .credit-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } .credit-eyebrow { font-size: 8px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tosca-muted); font-weight: 600; } .credit-name { font-size: 12px; letter-spacing: 0.06em; font-weight: 700; color: var(--paper-dark); } .credit-institution { font-size: 8px; color: var(--tosca-muted); letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; } /* --------- Mobile (≤ 640px) --------- */ @media (max-width: 640px) { .app-shell { padding: 18px 12px 44px; } .toolbar { grid-template-columns: 1fr; gap: 14px; } .hero-teacher-name { font-size: 18px; } .summary-card strong { font-size: 20px; } .schedule-card { min-height: 120px; } .ticket-stub { width: 108px; padding: 12px 10px; } .schedule-card::before, .schedule-card::after { left: 102px; } .stub-time { font-size: 20px; } .ticket-body { padding: 12px 12px 12px 14px; } .ticket-code { font-size: 16px; } .ticket-subject { font-size: 13px; } } /* --------- Theme picker --------- */ .theme-picker { position: relative; display: inline-block; } .theme-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--tosca-line); color: var(--paper-dark); padding: 4px 8px 4px 6px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: border-color 120ms, background 120ms; } .theme-toggle:hover { border-color: var(--tosca-soft); } .theme-toggle .theme-swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--tosca-soft); flex: 0 0 auto; } .theme-toggle .theme-caret { font-size: 8px; opacity: 0.6; margin-left: 2px; } .theme-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 180px; /* Warna tetap (tidak ikut tema aktif) supaya teks selalu terbaca. */ background: #1c1e21; border: 1px solid #3a3d42; color: #e5e7eb; box-shadow: 0 8px 24px rgba(0,0,0,0.25); display: flex; flex-direction: column; } .theme-option { display: flex; align-items: center; gap: 10px; background: transparent; border: 0; border-bottom: 1px solid #2a2d31; color: #e5e7eb; padding: 10px 12px; font-size: 11px; letter-spacing: 0.05em; font-weight: 600; cursor: pointer; text-align: left; transition: background 120ms, color 120ms; } .theme-option:last-child { border-bottom: 0; } .theme-option:hover { background: #26292d; color: #ffffff; } .theme-option .theme-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); flex: 0 0 auto; } .theme-option.active { color: var(--accent); } .theme-option .theme-check { margin-left: auto; font-size: 12px; color: var(--accent); opacity: 0; } .theme-option.active .theme-check { opacity: 1; } /* Print view disembunyikan di layar; hanya muncul saat cetak */ .print-view { display: none; } /* --------- Cetak --------- */ @media print { @page { size: A4 portrait; margin: 12mm 14mm; } /* Sembunyikan seluruh UI boarding pass; tampilkan HANYA print-view */ body > *:not(.app-shell), .app-shell > *:not(.print-view), .no-print { display: none !important; } .print-view { display: block !important; } html, body { background: #fff; color: #000; } .app-shell { padding: 0; max-width: none; margin: 0; color: #000; font-family: 'Inter', -apple-system, sans-serif; font-size: 9pt; line-height: 1.35; } .print-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1.5pt solid #000; padding-bottom: 6pt; margin-bottom: 10pt; } .print-eyebrow { font-size: 7pt; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: #555; margin-bottom: 3pt; } .print-title { font-size: 15pt; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.15; color: #000; } .print-meta { text-align: right; font-size: 8pt; color: #333; line-height: 1.4; } .print-meta > div:first-child { font-weight: 700; font-size: 9pt; color: #000; margin-bottom: 2pt; } .print-institution { font-size: 7pt; letter-spacing: 0.14em; text-transform: uppercase; color: #666; } .print-table { width: 100%; border-collapse: collapse; font-size: 9pt; table-layout: fixed; } .print-table th { background: #f2f2f2; border-top: 1pt solid #000; border-bottom: 1pt solid #000; padding: 4pt 5pt; text-align: left; font-size: 7pt; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: #000; } .print-table td { padding: 3pt 5pt; border-bottom: 0.4pt solid #ccc; vertical-align: top; overflow-wrap: break-word; word-break: break-word; } .print-table tr { break-inside: avoid; } .print-table tr.day-break td { border-top: 0.6pt solid #888; padding-top: 4pt; } .print-table td.day-cell { font-weight: 700; letter-spacing: 0.02em; color: #000; /* Kalau kosong (baris lanjutan hari yang sama), tidak ada garis pemisah tebal */ border-bottom: 0; } .print-table tr.day-break td.day-cell { border-top: 0.6pt solid #888; } .print-table td.time { font-variant-numeric: tabular-nums; white-space: nowrap; } .print-table td.code { font-weight: 600; font-variant-numeric: tabular-nums; } .print-table td.subject .note { font-style: italic; color: #666; font-size: 8pt; } .print-table td.night::after { content: ' ☾'; color: #666; font-size: 8pt; } .print-table td.conflict-cell { background: #fff3e0; } .print-table td.conflict-cell::before { content: '⚠ '; color: #c05000; } .print-footer { display: flex; justify-content: space-between; margin-top: 10pt; padding-top: 4pt; border-top: 0.5pt solid #ccc; font-size: 7pt; letter-spacing: 0.08em; text-transform: uppercase; color: #666; } .print-footer::after { content: 'Dibuat oleh Transformasi Digital Polibatam'; display: block; text-align: center; width: 100%; margin-top: 6pt; font-size: 7pt; letter-spacing: 0.16em; text-transform: uppercase; color: #999; font-weight: 700; } .print-footer { flex-wrap: wrap; } }