/* === SHADCN-STYLE DESIGN TOKENS === */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    /* shadcn-style CSS variables */
    --background: 0 0% 100%;
    --foreground: 210 40% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 210 40% 4.9%;
    --primary: 221 83% 53%;
    --primary-foreground: 210 40% 98%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 210 40% 96%;
    --accent-foreground: 210 40% 4.9%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 221 83% 53%;
    --radius: 0.625rem;

    /* Legacy support colors */
    --bg-color: hsl(var(--background));
    --card-bg: hsl(var(--card));
    --blue: hsl(var(--primary));
    --purple: 270 65% 60%;
    --red: hsl(var(--destructive));
    --text-primary: hsl(var(--foreground));
    --separator: hsl(var(--border));
    --teal: 188 62% 45%;
    --green: 142 71% 45%;
    --orange: 36 100% 50%;
    --indigo: 243 75% 59%;
    --pink: 344 81% 60%;
}

/* === RESET & BASE === */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    overflow: hidden;
}

/* === SHADCN COMPONENT CLASSES === */
@layer components {
    .btn {
        @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
    }

    .btn-primary {
        @apply bg-primary text-primary-foreground shadow hover:bg-primary/90 active:scale-[0.98];
    }

    .btn-secondary {
        @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80;
    }

    .btn-outline {
        @apply border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground;
    }

    .btn-ghost {
        @apply hover:bg-accent hover:text-accent-foreground;
    }

    .btn-destructive {
        @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90;
    }

    .card {
        @apply bg-card text-card-foreground rounded-xl border shadow-sm;
    }

    .input {
        @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
    }

    .label {
        @apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
    }

    .badge {
        @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors;
    }

    .badge-blue {
        @apply bg-blue-100 text-blue-800 border-blue-200;
    }
}

/* === APP CONTAINER (Split View) === */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* === VIEW SWITCHING === */
#setupView,
#timetableView,
#mainView {
    display: none;
    width: 100%;
    height: 100vh;
}

#setupView.active,
#timetableView.active {
    display: block;
}

#mainView.active {
    display: flex;
    flex: 1;
    height: 100vh;
}

/* === SETUP FLOW STYLES === */
.setup-container {
    padding: 24px;
    max-width: 520px;
    margin: 0 auto;
}

.setup-card {
    @apply card overflow-hidden;
}

.setup-shell-header {
    @apply border-b bg-gradient-to-b from-blue-50 to-blue-100/50 px-6 py-5;
}

.setup-kicker {
    @apply inline-flex items-center rounded-full bg-blue-100 text-blue-800 px-3 py-1 text-xs font-bold uppercase tracking-wide mb-2;
}

.setup-shell-header h2 {
    @apply text-xl font-bold text-slate-800 m-0;
}

.setup-shell-body {
    @apply flex flex-col gap-4 p-6;
}

.setup-panel {
    @apply rounded-xl border bg-gradient-to-b from-white to-slate-50/50 p-4;
}

.setup-panel-education {
    @apply bg-gradient-to-b from-blue-50/50 to-blue-100/20 border-blue-200/50;
}

.setup-panel-classes {
    @apply bg-gradient-to-b from-white to-slate-50/50;
}

.setup-label {
    @apply text-sm font-semibold text-slate-700 mb-2 block;
}

.setup-select-wrap {
    @apply relative;
}

.setup-select-wrap::after {
    content: "";
    @apply absolute right-3 top-1/2 -translate-y-1/2 w-2 h-2 border-r-2 border-b-2 border-slate-500 rotate-45 pointer-events-none;
}

.setup-select {
    @apply appearance-none w-full h-10 rounded-lg border border-slate-300 bg-white pl-3 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all;
}

.setup-panel-head {
    @apply flex justify-between items-center mb-3;
}

.setup-panel-title {
    @apply text-sm font-bold text-slate-800 m-0;
}

.setup-pill {
    @apply inline-flex items-center rounded-full bg-blue-100 text-blue-800 border border-blue-200 text-xs font-bold px-3 py-1;
}

.setup-class-list {
    @apply flex flex-col gap-3;
}

.setup-class-row {
    @apply rounded-xl border border-slate-200 bg-white p-4 transition-all duration-200 hover:border-blue-300 hover:shadow-md focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20;
}

.setup-class-row-head {
    @apply flex justify-between items-center mb-3;
}

.setup-class-index {
    @apply inline-flex items-center rounded-full bg-slate-100 text-slate-600 text-xs font-bold px-2 py-1;
}

.setup-class-remove {
    @apply w-6 h-6 rounded-lg bg-red-50 text-red-600 border border-red-200 text-sm font-bold flex items-center justify-center cursor-pointer hover:bg-red-100 hover:border-red-300 transition-all;
}

.setup-class-grid {
    @apply grid grid-cols-2 gap-3;
}

.setup-class-field {
    @apply flex flex-col gap-1;
}

.setup-add-btn {
    @apply w-full h-10 rounded-xl border-2 border-dashed border-slate-300 text-slate-600 text-sm font-bold cursor-pointer transition-all duration-200 hover:border-blue-400 hover:text-blue-600 hover:bg-blue-50/50;
}

.setup-actions {
    @apply flex flex-col gap-3 mt-2;
}

.setup-footer-note {
    @apply text-xs text-slate-500 m-0;
}

.setup-submit-btn {
    @apply w-full py-4 rounded-xl bg-blue-500 text-white text-sm font-bold cursor-pointer transition-all duration-200 hover:bg-blue-600 hover:shadow-lg active:scale-[0.98] disabled:bg-slate-300 disabled:cursor-not-allowed;
}

/* === TIMETABLE STYLES === */
.timetable-container {
    @apply p-6 max-w-2xl mx-auto;
}

.timetable-header {
    @apply mb-6;
}

.timetable-header h2 {
    @apply text-xl font-bold text-blue-600 m-0 flex items-center gap-2;
}

.timetable-header p {
    @apply text-sm text-slate-600 m-0 mt-1;
}

.school-start-day {
    @apply mb-6 p-5 bg-slate-100/80 rounded-xl border border-slate-200;
}

.school-start-day label {
    @apply text-sm font-semibold text-slate-700 mb-3 block;
}

.day-start-options {
    @apply flex gap-3 mb-3;
}

.day-start-box {
    @apply flex-1 p-4 bg-white border-2 border-slate-200 rounded-xl text-center cursor-pointer transition-all duration-200 hover:border-blue-400;
}

.day-start-box.selected {
    @apply bg-blue-500 border-blue-500 text-white;
}

.day-start-box div:first-child {
    @apply text-sm font-bold;
}

.day-start-box div:last-child {
    @apply text-xs mt-1 opacity-70;
}

.day-start-box.selected div:last-child {
    @apply text-white/80;
}

.timetable-class-list {
    @apply flex flex-col gap-4;
}

.timetable-class-item {
    @apply bg-white rounded-xl border border-slate-200 p-5 shadow-sm;
}

.timetable-class-header {
    @apply flex justify-between items-center pb-3 mb-4 border-b border-slate-100;
}

.timetable-class-name {
    @apply text-sm font-bold text-slate-800;
}

.class-day-selector {
    @apply flex gap-2 flex-wrap mb-3;
}

.day-box {
    @apply px-3 py-2 rounded-lg text-xs font-bold cursor-pointer border transition-all duration-200 hover:scale-105;
}

.day-box.selected { @apply text-white; }
.day-box.ahad.selected { @apply bg-orange-500 border-orange-500; }
.day-box.isnin.selected { @apply bg-blue-500 border-blue-500; }
.day-box.selasa.selected { @apply bg-green-500 border-green-500; }
.day-box.rabu.selected { @apply bg-purple-500 border-purple-500; }
.day-box.khamis.selected { @apply bg-red-500 border-red-500; }
.day-box.jumaat.selected { @apply bg-teal-500 border-teal-500; }

.day-box:not(.selected) {
    @apply bg-white border-slate-200 text-slate-600 hover:border-blue-400;
}

.time-inputs {
    @apply grid grid-cols-2 gap-3;
}

.time-input-group label {
    @apply text-xs font-semibold text-slate-500 mb-1 block;
}

/* === PER-DAY TIMETABLE STYLES === */
.timetable-day-tabs {
    @apply flex gap-2 flex-wrap mb-6;
}

.day-tab {
    @apply px-4 py-2 rounded-xl text-sm font-bold cursor-pointer border-2 transition-all duration-200 hover:scale-105;
}

.day-tab:not(.active) {
    @apply bg-white border-slate-200 text-slate-600 hover:border-blue-400;
}

.day-tab.active { @apply text-white; }
.day-tab.ahad.active { @apply bg-orange-500 border-orange-500; }
.day-tab.isnin.active { @apply bg-blue-500 border-blue-500; }
.day-tab.selasa.active { @apply bg-green-500 border-green-500; }
.day-tab.rabu.active { @apply bg-purple-500 border-purple-500; }
.day-tab.khamis.active { @apply bg-red-500 border-red-500; }
.day-tab.jumaat.active { @apply bg-teal-500 border-teal-500; }

.timetable-day-content {
    @apply min-h-48 bg-slate-100/80 rounded-xl p-5;
}

.timetable-empty-day {
    @apply text-center py-12 text-slate-400;
}

.timetable-empty-day p {
    @apply text-sm;
}

.timetable-day-entry {
    @apply bg-white rounded-xl border border-slate-200 p-4 mb-4 shadow-sm;
}

.timetable-entry-header {
    @apply flex justify-between items-center pb-3 mb-4 border-b border-slate-100;
}

.entry-number {
    @apply text-xs font-bold text-blue-600;
}

.entry-remove {
    @apply w-7 h-7 rounded-full bg-red-500 text-white text-base flex items-center justify-center cursor-pointer border-none hover:bg-red-600 transition-all;
}

.timetable-entry-fields {
    @apply flex flex-col gap-3;
}

.timetable-field label {
    @apply text-xs font-semibold text-slate-500 mb-1 block;
}

.timetable-field select,
.timetable-field input[type="time"] {
    @apply w-full p-3 rounded-lg border border-slate-200 text-sm bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all;
}

.timetable-time-row {
    @apply flex items-center gap-3;
}

.timetable-time-row .timetable-field {
    @apply flex-1;
}

.timetable-time-sep {
    @apply text-base text-slate-400 pt-5;
}

/* === PREVIEW PANEL (Left - 70%) === */
.preview-panel {
    flex: 0 0 70%;
    @apply flex flex-col bg-slate-200 border-r border-slate-200;
}

.preview-header {
    @apply flex justify-between items-center px-5 py-3 bg-white/80 backdrop-blur-xl border-b border-slate-200/50 sticky top-0 z-50;
}

.preview-header h1 {
    @apply text-sm font-bold text-slate-500 uppercase tracking-widest;
}

.preview-controls {
    @apply flex items-center gap-3;
}

.preview-btn {
    @apply w-9 h-9 rounded-lg bg-slate-100 text-blue-600 text-lg font-bold flex items-center justify-center cursor-pointer transition-all duration-200 hover:bg-slate-200;
}

#zoomLevel {
    @apply text-sm font-semibold text-slate-500 min-w-12 text-center;
}

.preview-scroll {
    @apply flex-1 overflow-auto p-8 flex justify-center;
}

/* === A4 PAPER === */
.a4-paper {
    width: 210mm;
    min-height: 297mm;
    @apply bg-white shadow-xl p-15;
    font-size: 10px;
    transform-origin: top center;
    transition: transform 0.2s ease;
}

/* Print styles for A4 */
@media print {
    body { @apply bg-white; }
    .app-container { @apply block h-auto; }
    .preview-panel { @apply hidden; }
    .form-panel { @apply hidden; }
    .a4-paper {
        width: 210mm;
        min-height: 297mm;
        @apply p-15 m-0 shadow-none;
        transform: none !important;
    }
}

@page {
    size: A4;
    margin: 0;
}

/* === A4 TEMPLATE (Reference-Matching) === */
.a4-paper {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    @apply text-slate-900;
}

.oum-brand {
    @apply text-center mb-3;
}

.oum-logo {
    @apply block w-44 h-auto mx-auto mb-1;
}

.oum-main-title {
    @apply text-xl font-bold tracking-wide m-0;
}

.template-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    @apply mb-3;
}
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px !important;
}

.setup-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.setup-panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #12253d;
}

.setup-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    border: 1px solid #bfd8fb;
    background: #edf5ff;
    color: #0f4ea4;
    font-size: 11px;
    font-weight: 700;
    padding: 0 10px;
    white-space: nowrap;
}

.setup-class-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.setup-class-row {
    border: 1px solid var(--separator);
    border-radius: 10px;
    background: #ffffff;
    padding: 10px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.setup-class-row:hover {
    border-color: #c2d0e1;
}

.setup-class-row:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14);
}

.setup-class-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.setup-class-index {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border: 1px solid var(--separator);
    border-radius: 999px;
    background: #f8f9fa;
    color: #8e8e93;
    font-size: 11px;
    font-weight: 700;
    padding: 0 8px;
}

.setup-class-remove {
    width: 24px;
    height: 24px;
    border: 1px solid #f4c7c3;
    border-radius: 7px;
    background: #fff2f1;
    color: #b73832;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.setup-class-remove:hover {
    background: #ffe9e6;
    border-color: #eea9a4;
    color: #9f2f29;
}

.setup-class-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
}

.setup-class-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setup-add-btn {
    width: 100%;
    min-height: 37px;
    margin-top: 8px;
    border: 1px solid #c9d4e4;
    border-radius: 9px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.setup-add-btn:hover {
    border-color: #a8c3ea;
    background: #f4f8ff;
    color: #0054b0;
}

.setup-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.setup-footer-note {
    margin: 0 2px;
    font-size: 11px;
    color: #66758d;
}

.setup-submit-btn {
    width: 100%;
    padding: 14px;
    background: var(--blue);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.setup-submit-btn:hover {
    background: #0066d5;
}

.setup-submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* === TIMETABLE STYLES === */
.timetable-container {
    padding: 15px;
}

.timetable-header {
    margin-bottom: 20px;
}

.timetable-header h2 {
    color: var(--blue);
    margin: 0 0 10px 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.timetable-header p {
    color: #666;
    font-size: 13px;
    margin: 0;
}

.school-start-day {
    margin-bottom: 20px;
    padding: 15px;
    background: #F9F9F9;
    border-radius: 10px;
}

.school-start-day label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    display: block;
}

.day-start-options {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.day-start-box {
    flex: 1;
    padding: 12px;
    background: white;
    border: 2px solid #E5E5EA;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.day-start-box:hover {
    border-color: var(--blue);
}

.day-start-box.selected {
    background: var(--blue);
    border-color: var(--blue);
    color: white;
}

.day-start-box div:first-child {
    font-size: 14px;
    font-weight: 600;
}

.day-start-box div:last-child {
    font-size: 11px;
    color: #8E8E93;
    margin-top: 4px;
}

.day-start-box.selected div:last-child {
    color: rgba(255, 255, 255, 0.8);
}

.timetable-class-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.timetable-class-item {
    background: white;
    border: 1px solid var(--separator);
    border-radius: 12px;
    padding: 15px;
}

.timetable-class-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--separator);
}

.timetable-class-name {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.class-day-selector {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.day-box {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--separator);
    background: white;
    transition: all 0.2s;
}

.day-box:hover {
    border-color: var(--blue);
}

.day-box.selected {
    color: white;
}

.day-box.selected.ahad { background: var(--orange); border-color: var(--orange); }
.day-box.selected.isnin { background: var(--blue); border-color: var(--blue); }
.day-box.selected.selasa { background: var(--green); border-color: var(--green); }
.day-box.selected.rabu { background: var(--purple); border-color: var(--purple); }
.day-box.selected.khamis { background: var(--red); border-color: var(--red); }
.day-box.selected.jumaat { background: var(--teal); border-color: var(--teal); }

.time-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.time-input-group label {
    font-size: 11px;
    font-weight: 600;
    color: #8e8e93;
    margin-bottom: 4px;
    display: block;
}

/* === PER-DAY TIMETABLE STYLES === */
.timetable-day-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.day-tab {
    padding: 10px 16px;
    border: 2px solid var(--separator);
    border-radius: 10px;
    background: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.day-tab:hover {
    border-color: var(--blue);
}

.day-tab.active {
    background: var(--blue);
    border-color: var(--blue);
    color: white;
}

.day-tab.ahad.active { background: var(--orange); border-color: var(--orange); }
.day-tab.isnin.active { background: var(--blue); border-color: var(--blue); }
.day-tab.selasa.active { background: var(--green); border-color: var(--green); }
.day-tab.rabu.active { background: var(--purple); border-color: var(--purple); }
.day-tab.khamis.active { background: var(--red); border-color: var(--red); }
.day-tab.jumaat.active { background: var(--teal); border-color: var(--teal); }

.timetable-day-content {
    min-height: 200px;
    background: #f9f9f9;
    border-radius: 12px;
    padding: 15px;
}

.timetable-empty-day {
    text-align: center;
    padding: 40px 20px;
    color: #8e8e93;
}

.timetable-empty-day p {
    margin: 5px 0;
}

.timetable-day-entry {
    background: white;
    border: 1px solid var(--separator);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.timetable-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--separator);
}

.entry-number {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
}

.entry-remove {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: #ff3b30;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.entry-remove:hover {
    background: #cc2f26;
}

.timetable-entry-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.timetable-field label {
    font-size: 11px;
    font-weight: 600;
    color: #8e8e93;
    margin-bottom: 4px;
    display: block;
}

.timetable-field select,
.timetable-field input[type="time"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--separator);
    border-radius: 8px;
    font-size: 14px;
    background: #f9f9f9;
}

.timetable-time-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.timetable-time-row .timetable-field {
    flex: 1;
}

.timetable-time-sep {
    font-size: 16px;
    color: #8e8e93;
    padding-top: 20px;
}

/* === PREVIEW PANEL (Left - 70%) === */
.preview-panel {
    flex: 0 0 70%;
    display: flex;
    flex-direction: column;
    background: #E5E5EA;
    border-right: 1px solid var(--separator);
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(30px);
    border-bottom: 1px solid rgba(229, 229, 234, 0.6);
}

.preview-header h1 {
    font-size: 14px;
    font-weight: 700;
    color: #8E8E93;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.preview-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: #F2F2F7;
    color: var(--blue);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.preview-btn:hover {
    background: #E5E5EA;
}

#zoomLevel {
    font-size: 13px;
    font-weight: 600;
    color: #8E8E93;
    min-width: 45px;
    text-align: center;
}

.preview-scroll {
    flex: 1;
    overflow: auto;
    padding: 30px;
    display: flex;
    justify-content: center;
}

/* === A4 PAPER === */
.a4-paper {
    width: 210mm;
    min-height: 297mm;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 15mm;
    font-size: 10px;
    transform-origin: top center;
    transition: transform 0.2s ease;
}

/* Print styles for A4 */
@media print {
    body {
        background: white;
    }
    
    .app-container {
        display: block;
        height: auto;
    }
    
    .preview-panel {
        display: none;
    }
    
    .form-panel {
        display: none;
    }
    
    .a4-paper {
        width: 210mm;
        min-height: 297mm;
        padding: 15mm;
        margin: 0;
        box-shadow: none;
        transform: none !important;
    }
}

@page {
    size: A4;
    margin: 0;
}

/* === A4 TEMPLATE (Reference-Matching) === */
.a4-paper {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #111;
}

.oum-brand {
    text-align: center;
    margin-bottom: 10px;
}

.oum-logo {
    display: block;
    width: 180px;
    height: auto;
    margin: 0 auto 6px;
}

.oum-main-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.template-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-bottom: 11px;
}

.template-table td,
.template-table th {
    border: 1px solid #1e1e1e;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.15;
    vertical-align: top;
}

.template-dark-header {
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.left-label {
    font-weight: 700;
}

.left-sub-label {
    font-weight: 700;
}

.value-cell {
    white-space: pre-line;
}

.info-table tr:not(:first-child) td:nth-child(1),
.info-table tr:not(:first-child) td:nth-child(3) {
    width: 19%;
}

.info-table tr:not(:first-child) td:nth-child(2),
.info-table tr:not(:first-child) td:nth-child(4) {
    width: 31%;
}

.section-table td {
    min-height: 22px;
}

.section-table tr:nth-child(5) td,
.section-table tr:nth-child(6) td {
    min-height: 34px;
}

.activities-table {
    margin-top: 2px;
}

.activities-table thead th {
    white-space: nowrap;
}

.activities-table td {
    font-size: 11px;
}

.col-stage {
    width: 19%;
}

.col-guru,
.col-murid,
.col-bahan {
    width: 20%;
}

.col-org {
    width: 21%;
}

.stage-cell {
    font-weight: 700;
    white-space: pre-line;
}

.activity-label {
    display: block;
    white-space: pre-line;
}

#activitiesBody tr:nth-child(2) .stage-cell {
    min-height: 72px;
}

/* === FORM PANEL (Right - 30%) === */
.form-panel {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    overflow: hidden;
}

.form-header {
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(30px);
    border-bottom: 1px solid rgba(229, 229, 234, 0.6);
}

.form-header h1 {
    font-size: 16px;
    font-weight: 700;
    color: var(--blue);
}

.rph-form {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

/* === FORM CARDS === */
.form-card {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.card-header {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

.header-blue { background: linear-gradient(90deg, var(--blue), #47aeff); }
.header-indigo { background: linear-gradient(90deg, var(--indigo), #7a78ff); }
.header-pink { background: linear-gradient(90deg, var(--pink), #ff6b8b); }
.header-orange { background: linear-gradient(90deg, var(--orange), #ffb347); }
.header-teal { background: linear-gradient(90deg, var(--teal), #64d2e6); }
.header-gray { background: linear-gradient(90deg, #8E8E93, #b0b0b5); }

.form-row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--separator);
}

.form-row:last-child {
    border-bottom: none;
}

.form-row label {
    font-size: 11px;
    font-weight: 600;
    color: #8e8e93;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

/* === FORM INPUTS === */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    border: none;
    font-size: 14px;
    width: 100%;
    outline: none;
    background: #F5F5F7;
    font-family: inherit;
    color: #1c1c1e;
    padding: 12px;
    border-radius: 12px;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.12);
    background: #FFFFFF;
}

textarea {
    resize: vertical;
    min-height: 60px;
}

/* === KBAT GRID === */
.kbat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kbat-item {
    display: inline-flex;
    align-items: center;
    width: 48%;
    box-sizing: border-box;
    font-size: 11px;
    background: #f9f9f9;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #eee;
}

.kbat-item input {
    width: auto;
    margin-right: 5px;
}

/* === ACTIVITY SECTION === */
.activity-section {
    padding: 12px 16px;
    border-bottom: 1px solid var(--separator);
}

.activity-section:last-child {
    border-bottom: none;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.activity-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.activity-time {
    width: 60px;
    text-align: center;
    padding: 6px !important;
    font-size: 12px !important;
}

.activity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.activity-field label {
    font-size: 10px;
    font-weight: 600;
    color: #8e8e93;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

.activity-field input,
.activity-field textarea {
    font-size: 12px;
    padding: 10px;
}

/* === SP CONTAINER === */
.sp-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 5px;
}

.sp-item {
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #eee;
    cursor: pointer;
}

.sp-item input {
    width: auto;
    margin-right: 10px;
    margin-top: 3px;
    transform: scale(1.2);
}

.sp-item span {
    line-height: 1.4;
    color: #333;
}

/* === FORM ACTIONS === */
.form-actions {
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(229, 229, 234, 0.6);
    display: flex;
    gap: 10px;
}

.btn {
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s;
    padding: 14px 20px;
}

.btn:active {
    opacity: 0.8;
}

.btn-primary {
    background: var(--blue);
    flex: 1;
}

.btn-secondary {
    background: #8E8E93;
}

/* === TOAST NOTIFICATIONS === */
.toast {
    position: fixed;
    top: 20px;
    right: -300px;
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 200;
    transition: right 0.4s ease;
    display: flex;
    align-items: center;
}

#infoToast { background: #333; }
#successToast { background: var(--green); }
#errorToast { background: var(--red); }

.toast.show {
    right: 20px;
}

/* === RESPONSIVE - Keep both A4 and form visible === */
@media (max-width: 1024px) {
    .app-container {
        flex-direction: row;
    }

    .preview-panel {
        flex: 0 0 60%;
        border-right: 1px solid var(--separator);
        border-bottom: none;
    }

    .form-panel {
        flex: 0 0 40%;
    }

    .a4-paper {
        transform: scale(0.85);
        transform-origin: top center;
    }
}

@media (max-width: 768px) {
    .app-container {
        flex-direction: row;
    }

    .preview-panel {
        flex: 0 0 50%;
        border-right: 1px solid var(--separator);
        border-bottom: none;
    }

    .form-panel {
        flex: 0 0 50%;
    }

    .a4-paper {
        transform: scale(0.6);
        transform-origin: top center;
    }
}

@media (max-width: 480px) {
    .preview-panel {
        flex: 0 0 45%;
    }

    .form-panel {
        flex: 0 0 55%;
    }

    .a4-paper {
        transform: scale(0.5);
        transform-origin: top center;
    }
}