/* =================================================================
   MyOffice 2026 — Pastel Edition
   Soft, gentle, gov-appropriate design with Sarabun font
   ================================================================= */

:root {
    /* Pastel palette */
    --lavender:       #a78bfa;
    --lavender-soft:  #ddd6fe;
    --lavender-bg:    #f5f3ff;
    --mint:           #6ee7b7;
    --mint-soft:      #a7f3d0;
    --mint-bg:        #ecfdf5;
    --peach:          #fda4af;
    --peach-soft:     #fecdd3;
    --peach-bg:       #fff1f2;
    --sky:            #93c5fd;
    --sky-soft:       #bfdbfe;
    --sky-bg:         #eff6ff;
    --pink:           #f9a8d4;
    --pink-soft:      #fbcfe8;
    --pink-bg:        #fdf2f8;
    --lemon:          #fcd34d;
    --lemon-soft:     #fde68a;
    --lemon-bg:       #fffbeb;
    --rose:           #fb7185;
    --rose-soft:      #fda4af;

    /* Semantic */
    --primary:        var(--lavender);
    --primary-hover:  #8b5cf6;
    --primary-bg:     var(--lavender-bg);
    --success:        #34d399;
    --success-bg:     #ecfdf5;
    --warning:        #fbbf24;
    --warning-bg:     #fef3c7;
    --danger:         #f87171;
    --danger-bg:      #fef2f2;
    --info:           #38bdf8;
    --info-bg:        #f0f9ff;

    /* Neutrals */
    --bg:             #faf9fd;
    --card:           #ffffff;
    --border:         #ece9f5;
    --border-strong:  #ddd6fe;
    --text:           #1e293b;
    --text-soft:      #475569;
    --text-muted:     #94a3b8;

    --shadow-sm:      0 1px 2px rgba(167,139,250,.05), 0 1px 1px rgba(0,0,0,.02);
    --shadow:         0 2px 8px rgba(167,139,250,.08), 0 1px 2px rgba(0,0,0,.03);
    --shadow-md:      0 4px 14px rgba(167,139,250,.12);
    --radius:         .85rem;
    --radius-sm:      .55rem;
}

* { font-family: 'Sarabun', system-ui, -apple-system, sans-serif; }
body {
    background: var(--bg);
    background-image: radial-gradient(circle at top right, #fff1f2 0%, transparent 30%),
                      radial-gradient(circle at bottom left, #ecfdf5 0%, transparent 30%);
    background-attachment: fixed;
    color: var(--text); font-size: 15px;
}
a { color: var(--primary-hover); text-decoration: none; }
a:hover { color: var(--lavender); text-decoration: underline; }

/* ============================================ Header ============================================ */
.site-header {
    background: linear-gradient(120deg, #faf5ff 0%, #fdf2f8 50%, #fff1f2 100%);
    border-bottom: 1px solid var(--border-strong);
    padding: .85rem 1.2rem;
    position: sticky; top: 0; z-index: 1020;
    box-shadow: var(--shadow-sm);
}
.site-header .brand {
    display: flex; align-items: center; gap: 1rem; text-decoration: none;
    color: var(--primary-hover); font-weight: 700; font-size: 1.45rem;
}
.site-header .brand i {
    color: var(--lavender);
    background: var(--lavender-bg);
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}
.site-header .brand-subtitle {
    font-size: .85rem; color: var(--text-muted); font-weight: 400;
    margin-top: .15rem;
}
.site-header .topbar-right {
    font-size: .9rem; color: var(--text-soft); font-weight: 500;
    background: #fff; padding: .4rem .9rem; border-radius: 999px;
    box-shadow: var(--shadow-sm);
}

/* ============================================ Navigation ============================================ */
.site-nav {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: .4rem 0;
    box-shadow: var(--shadow-sm);
}
.site-nav .nav-link {
    color: var(--text-soft); font-weight: 500;
    padding: .55rem 1rem; border-radius: 999px;
    transition: all .2s ease;
    margin: 0 .15rem;
}
.site-nav .nav-link:hover {
    background: var(--lavender-bg); color: var(--primary-hover);
}
.site-nav .nav-link i {
    color: var(--lavender); margin-right: .35rem;
    transition: transform .2s ease;
}
.site-nav .nav-link:hover i { transform: scale(1.15); }
.site-nav .nav-link.active {
    background: linear-gradient(135deg, var(--lavender), var(--lavender-hover, #c4b5fd));
    color: #fff;
}
.site-nav .nav-link.active i { color: #fff; }

/* Marquee/today bar */
.today-bar {
    background: linear-gradient(90deg, #a7f3d0 0%, #6ee7b7 50%, #5eead4 100%);
    color: #064e3b; padding: .55rem 1rem;
    font-weight: 600; font-size: .95rem; text-align: center;
    box-shadow: inset 0 -2px 0 rgba(255,255,255,.4);
}

/* ============================================ Sidebar ============================================ */
.sidebar {
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}
.sidebar h6 {
    color: var(--primary-hover); font-weight: 600; font-size: .95rem;
    margin: 0 0 .8rem 0; padding-bottom: .55rem;
    border-bottom: 2px solid var(--lavender-bg);
    display: flex; align-items: center; gap: .4rem;
}
.sidebar h6 i { color: var(--lavender); }
.sidebar .side-item {
    display: block; padding: .45rem .35rem .45rem .15rem;
    border-radius: var(--radius-sm); color: var(--text); font-size: .9rem;
    transition: all .15s ease;
    border-bottom: 1px dotted var(--border);
}
.sidebar .side-item:hover {
    background: var(--lavender-bg); color: var(--primary-hover);
    text-decoration: none; padding-left: .65rem;
}
.sidebar .side-item i {
    color: var(--lavender); margin-right: .4rem; font-size: .75rem;
}
.sidebar .side-item:last-child { border-bottom: 0; }

/* User profile card */
.user-card { text-align: center; padding-top: 1.5rem; }
.user-card .avatar {
    width: 100px; height: 100px; border-radius: 50%;
    object-fit: cover; margin: 0 auto .85rem;
    border: 4px solid #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 3px var(--lavender-soft), 0 6px 18px rgba(167,139,250,.25);
}
.user-card .avatar.placeholder {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--pink) 100%);
    color: #fff; font-size: 2.5rem; font-weight: 600;
}
.user-card .name { font-weight: 600; color: var(--text); margin-bottom: .15rem; font-size: 1rem; }
.user-card .position { color: var(--text-muted); font-size: .85rem; margin-bottom: 1rem; }

/* Stats list */
.stat-list { font-size: .92rem; }
.stat-list .row-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: .45rem 0;
    border-bottom: 1px dotted var(--border);
}
.stat-list .row-item:last-child { border-bottom: 0; }
.stat-list .value {
    font-weight: 600; color: var(--primary-hover);
    background: var(--lavender-bg); padding: .15rem .55rem;
    border-radius: 999px; font-size: .85rem;
}

/* ============================================ Action Grid ============================================ */
.action-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.action-tile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.3rem .8rem;
    text-align: center; text-decoration: none; color: var(--text);
    transition: all .25s cubic-bezier(.4, 0, .2, 1); min-height: 140px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .6rem; box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
}
.action-tile::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.4) 100%);
    opacity: 0; transition: opacity .25s ease;
    pointer-events: none;
}
.action-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    color: var(--text); text-decoration: none;
    border-color: var(--lavender-soft);
}
.action-tile:hover::before { opacity: 1; }
.action-tile .icon {
    width: 60px; height: 60px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem; color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.07);
    transition: transform .25s ease;
}
.action-tile:hover .icon { transform: scale(1.1) rotate(-3deg); }
.action-tile .label {
    font-weight: 500; font-size: .95rem; line-height: 1.3;
    color: var(--text);
}

/* Pastel tile colors */
.tile-c1 .icon { background: linear-gradient(135deg, #fde68a, #fcd34d); }            /* lemon */
.tile-c2 .icon { background: linear-gradient(135deg, #c4b5fd, #a78bfa); }            /* lavender */
.tile-c3 .icon { background: linear-gradient(135deg, #a7f3d0, #6ee7b7); }            /* mint */
.tile-c4 .icon { background: linear-gradient(135deg, #fecdd3, #fda4af); }            /* peach */
.tile-c5 .icon { background: linear-gradient(135deg, #bfdbfe, #93c5fd); }            /* sky */
.tile-c6 .icon { background: linear-gradient(135deg, #fbcfe8, #f9a8d4); }            /* pink */
.tile-c7 .icon { background: linear-gradient(135deg, #ddd6fe, #c4b5fd); }            /* light lavender */
.tile-c8 .icon { background: linear-gradient(135deg, #fcd34d, #fbbf24); }            /* amber */

@media (max-width: 992px) {
    .action-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .action-grid { grid-template-columns: repeat(2, 1fr); }
    .action-tile { min-height: 115px; padding: 1rem .5rem; }
    .action-tile .icon { width: 48px; height: 48px; font-size: 1.25rem; }
}

/* ============================================ Cards ============================================ */
.card {
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.card-header {
    background: linear-gradient(120deg, #faf5ff 0%, #fff 60%);
    border-bottom: 1px solid var(--border);
    font-weight: 600; padding: .85rem 1.1rem;
    color: var(--text);
}
.card-header i { color: var(--lavender); margin-right: .3rem; }
.card-body { padding: 1.1rem; }

/* ============================================ Tables ============================================ */
.table { font-size: .92rem; margin-bottom: 0; color: var(--text); }
.table > :not(caption) > * > * { padding: .8rem .95rem; vertical-align: middle; }
.table thead th {
    background: var(--lavender-bg);
    font-weight: 600; color: var(--primary-hover);
    border-bottom: 2px solid var(--border-strong); font-size: .88rem;
    text-transform: none;
}
.table-hover tbody tr:hover { background: var(--lavender-bg); }
.table > tbody > tr > td { border-color: var(--border); }

/* ============================================ Buttons ============================================ */
.btn {
    font-weight: 500; border-radius: 999px; font-size: .92rem;
    padding: .5rem 1.2rem;
    transition: all .2s ease;
}
.btn-sm { padding: .3rem .85rem; font-size: .82rem; }
.btn-lg { padding: .65rem 1.6rem; font-size: 1rem; }
.btn-primary {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--primary-hover) 100%);
    border: 0; color: #fff;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, #7c3aed 100%);
    box-shadow: 0 4px 14px rgba(167,139,250,.35);
    color: #fff;
}
.btn-success {
    background: linear-gradient(135deg, var(--mint) 0%, var(--success) 100%);
    border: 0; color: #064e3b;
}
.btn-success:hover { color: #064e3b; box-shadow: 0 4px 14px rgba(110,231,183,.4); }
.btn-danger {
    background: linear-gradient(135deg, var(--peach-soft) 0%, var(--rose) 100%);
    border: 0; color: #7f1d1d;
}
.btn-danger:hover { color: #7f1d1d; box-shadow: 0 4px 14px rgba(251,113,133,.35); }
.btn-warning {
    background: linear-gradient(135deg, var(--lemon-soft) 0%, var(--warning) 100%);
    border: 0; color: #78350f;
}
.btn-warning:hover { color: #78350f; box-shadow: 0 4px 14px rgba(251,191,36,.35); }
.btn-info {
    background: linear-gradient(135deg, var(--sky-soft) 0%, var(--info) 100%);
    border: 0; color: #0c4a6e;
}
.btn-info:hover { color: #0c4a6e; box-shadow: 0 4px 14px rgba(56,189,248,.35); }

.btn-outline-primary {
    border: 1.5px solid var(--lavender); color: var(--primary-hover); background: transparent;
}
.btn-outline-primary:hover {
    background: var(--lavender-bg); border-color: var(--lavender); color: var(--primary-hover);
}
.btn-outline-secondary { border: 1.5px solid var(--border-strong); color: var(--text-soft); background: transparent; }
.btn-outline-secondary:hover { background: #f8f8fc; color: var(--text); }
.btn-outline-success { border: 1.5px solid var(--success); color: var(--success); background: transparent; }
.btn-outline-success:hover { background: var(--success-bg); color: var(--success); }
.btn-outline-danger { border: 1.5px solid var(--danger); color: var(--danger); background: transparent; }
.btn-outline-danger:hover { background: var(--danger-bg); color: var(--danger); }
.btn-light { background: #f5f5f9; border: 1px solid var(--border); color: var(--text-soft); }
.btn-light:hover { background: #ebebf3; color: var(--text); }

/* ============================================ Forms ============================================ */
.form-control, .form-select {
    border-radius: var(--radius-sm); border-color: var(--border-strong);
    font-size: .95rem; padding: .55rem .85rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--lavender);
    box-shadow: 0 0 0 .25rem rgba(167,139,250,.18);
}
.form-control-lg { padding: .7rem 1rem; font-size: 1rem; }
.form-control-sm { padding: .35rem .6rem; font-size: .85rem; }
.form-label { font-weight: 500; font-size: .92rem; margin-bottom: .35rem; color: var(--text-soft); }
.required::after { content: " *"; color: var(--danger); }
.form-check-input:checked { background-color: var(--lavender); border-color: var(--lavender); }
.form-check-input:focus { border-color: var(--lavender); box-shadow: 0 0 0 .2rem rgba(167,139,250,.18); }

/* ============================================ Badges ============================================ */
.badge {
    font-weight: 500; font-size: .76rem;
    padding: .4em .8em; border-radius: 999px;
}
.badge.bg-secondary { background: #e5e7eb !important; color: #475569 !important; }
.badge.bg-primary { background: var(--lavender) !important; color: #fff !important; }
.badge.bg-success { background: var(--mint-soft) !important; color: #064e3b !important; }
.badge.bg-warning { background: var(--lemon-soft) !important; color: #78350f !important; }
.badge.bg-danger { background: var(--peach-soft) !important; color: #7f1d1d !important; }
.badge.bg-info { background: var(--sky-soft) !important; color: #0c4a6e !important; }
.badge.bg-light { background: #f8f8fc !important; color: var(--text-soft) !important; border: 1px solid var(--border); }

/* ============================================ Login card ============================================ */
.login-card {
    background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow-md); padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
}
.login-card .header {
    background: linear-gradient(120deg, var(--lavender-bg) 0%, var(--pink-bg) 100%);
    padding: .9rem 1.2rem; font-weight: 600; color: var(--primary-hover);
    border-bottom: 2px solid var(--lavender-soft);
    display: flex; align-items: center; gap: .5rem;
}
.login-card .body { padding: 1.6rem; }

/* ============================================ Mini calendar ============================================ */
.mini-calendar { width: 100%; border-collapse: separate; border-spacing: 4px; }
.mini-calendar th {
    background: var(--lavender-bg); color: var(--primary-hover);
    text-align: center; padding: .55rem; font-weight: 600;
    font-size: .85rem; border-radius: var(--radius-sm);
}
.mini-calendar td {
    text-align: center; padding: .4rem;
    font-size: .92rem; height: 38px; vertical-align: middle;
    border-radius: var(--radius-sm); background: #fff;
    border: 1px solid var(--border);
}
.mini-calendar td.has-event {
    background: linear-gradient(135deg, var(--lemon-bg), var(--lemon-soft));
    font-weight: 600; border-color: var(--lemon);
}
.mini-calendar td.has-event a { color: #92400e; text-decoration: none; font-weight: 600; }
.mini-calendar td.today {
    background: linear-gradient(135deg, var(--lavender) 0%, var(--primary-hover) 100%);
    color: #fff; font-weight: 700; border-color: var(--primary-hover);
    box-shadow: 0 2px 8px rgba(167,139,250,.3);
}
.mini-calendar td.today a { color: #fff; }

/* ============================================ Footer ============================================ */
.site-footer {
    background: linear-gradient(135deg, var(--lavender-bg) 0%, var(--pink-bg) 100%);
    color: var(--text-soft); padding: 1.5rem; text-align: center;
    font-size: .88rem; margin-top: 2rem;
    border-top: 2px solid var(--lavender-soft);
}
.site-footer a { color: var(--primary-hover); }

/* ============================================ Misc ============================================ */
.page-title {
    font-size: 1.35rem; font-weight: 700; color: var(--text);
    margin: 0;
}
.page-title i { color: var(--lavender); margin-right: .3rem; }
.page-subtitle { color: var(--text-muted); font-size: .9rem; }

.alert {
    border-radius: var(--radius); border: 1px solid; box-shadow: var(--shadow-sm);
    padding: .85rem 1.1rem;
}
.alert-success { background: var(--mint-bg); border-color: var(--mint-soft); color: #064e3b; }
.alert-danger  { background: var(--peach-bg); border-color: var(--peach-soft); color: #7f1d1d; }
.alert-warning { background: var(--lemon-bg); border-color: var(--lemon-soft); color: #78350f; }
.alert-info    { background: var(--sky-bg); border-color: var(--sky-soft); color: #0c4a6e; }

.section-title {
    color: var(--primary-hover); font-weight: 600; font-size: 1.05rem;
    margin: 0 0 .8rem 0; padding-bottom: .5rem;
    border-bottom: 2px solid var(--lavender-bg);
    display: flex; align-items: center; gap: .4rem;
}
.section-title i { color: var(--lavender); }

/* List groups */
.list-group { border-radius: var(--radius); overflow: hidden; }
.list-group-item { border-color: var(--border); padding: .8rem 1rem; }
.list-group-item:hover { background: var(--lavender-bg); }

/* Pagination */
.pagination .page-link { color: var(--primary-hover); border-color: var(--border); }
.pagination .page-item.active .page-link { background: var(--lavender); border-color: var(--lavender); }

/* Soft scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--lavender-bg); }
::-webkit-scrollbar-thumb { background: var(--lavender-soft); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--lavender); }

/* Small visual polish */
hr { border-color: var(--border); opacity: 1; }
code {
    background: var(--lavender-bg); color: var(--primary-hover);
    padding: .12em .4em; border-radius: 4px; font-size: .88em;
}
.text-primary { color: var(--primary-hover) !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: #d97706 !important; }
.text-muted   { color: var(--text-muted) !important; }

/* Dropdown menu */
.dropdown-menu {
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-md); padding: .5rem;
}
.dropdown-item { border-radius: var(--radius-sm); padding: .55rem .85rem; }
.dropdown-item:hover { background: var(--lavender-bg); color: var(--primary-hover); }

/* Soft hover for clickable cards */
.action-tile, .card, .login-card { transition: transform .2s ease, box-shadow .2s ease; }

/* Rich-text content display (from Quill editor) */
.doc-content { line-height: 1.75; }
.doc-content h1, .doc-content h2, .doc-content h3, .doc-content h4 {
    color: var(--primary-hover); font-weight: 600; margin: 1rem 0 .4rem 0;
}
.doc-content h4 { font-size: 1.05rem; }
.doc-content p { margin-bottom: .65rem; }
.doc-content ul, .doc-content ol { padding-left: 1.6rem; margin-bottom: .65rem; }
.doc-content li { margin-bottom: .25rem; }
.doc-content blockquote {
    border-left: 4px solid var(--lavender-soft);
    padding-left: 1rem; margin: 1rem 0; color: var(--text-soft);
}