{{--
    DIARY DESIGN SYSTEM — _diary-design.blade.php
    Include this at the TOP of @push('styles') in every diary view.
    Defines CSS custom properties, typography, shared utilities, nav, badges, 
    alerts, animations used across all diary views.
--}}
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&amp;family=Outfit:wght@300;400;500;600&amp;display=swap" rel="stylesheet">
<style>
/* ══════════════════════════════════════════
   DIARY DESIGN SYSTEM  v2
   ══════════════════════════════════════════ */
:root {
    --ink:        #0f1923;
    --ink-soft:   #3a4a5c;
    --ink-muted:  #7a8fa6;
    --paper:      #f6fafd;
    --surface:    #ffffff;
    --rule:       #dce8f2;
    --rule-strong:#b8d0e8;

    --blue:       #1d6fce;
    --blue-light: #2d87f0;
    --blue-pale:  #e8f2fd;
    --blue-deep:  #124fa0;
    --blue-grad:  linear-gradient(135deg, #2d87f0, #124fa0);

    --amber:      #d97706;
    --amber-pale: #fef3cd;
    --rose:       #dc2626;
    --rose-pale:  #fee2e2;
    --emerald:    #059669;
    --emerald-pale:#d1fae5;
    --slate:      #64748b;
    --slate-pale: #f1f5f9;
    --violet:     #7c3aed;
    --violet-pale:#ede9fe;

    --font-serif: 'Lora', Georgia, serif;
    --font-sans:  'Outfit', system-ui, sans-serif;

    --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px;
    --sh-sm: 0 1px 4px rgba(15,25,35,.07);
    --sh-md: 0 4px 16px rgba(15,25,35,.09);
    --sh-lg: 0 10px 36px rgba(15,25,35,.12);
    --sh-blue: 0 6px 22px rgba(29,111,206,.22);
}

body, .content-wrapper { background: var(--paper) !important; font-family: var(--font-sans); }

/* ── Animations ── */
@keyframes slideUp {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0);    }
}
@keyframes fadeIn {
    from { opacity:0; } to { opacity:1; }
}

/* ── Page Wrapper ── */
.diary-page { padding: 24px 28px; max-width: 1400px; margin: 0 auto; }

/* ── Breadcrumb ── */
.diary-topnav {
    display:flex; align-items:center; gap:7px;
    font-size:.77rem; font-weight:500; color:var(--ink-muted);
    margin-bottom:22px; letter-spacing:.02em;
}
.diary-topnav a { color:var(--blue); text-decoration:none; transition:color .15s; }
.diary-topnav a:hover { color:var(--blue-deep); }
.diary-topnav .sep { opacity:.4; }
.diary-topnav .current { color:var(--ink-soft); font-weight:600; }

/* ── Page Header ── */
.diary-page-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:24px; padding-bottom:20px; border-bottom:1.5px solid var(--rule);
    animation: slideUp .45s ease both;
}
.diary-page-header-left { display:flex; align-items:center; gap:16px; }
.diary-page-icon {
    width:48px; height:48px; flex-shrink:0;
    background:var(--blue-grad); border-radius:var(--r-lg);
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; color:#fff; box-shadow:var(--sh-blue);
}
.diary-page-title {
    font-family:var(--font-serif); font-size:1.6rem; font-weight:700;
    color:var(--ink); line-height:1.15; letter-spacing:-.015em; margin:0 0 3px;
}
.diary-page-sub {
    font-size:.78rem; color:var(--ink-muted); font-weight:400; margin:0;
}
.diary-page-header-right { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Buttons ── */
.btn-diary {
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 16px; border-radius:var(--r-md); font-family:var(--font-sans);
    font-size:.8rem; font-weight:600; text-decoration:none; border:none;
    cursor:pointer; transition:all .18s; white-space:nowrap;
    box-shadow:var(--sh-sm); line-height:1.3;
}
.btn-diary:hover { transform:translateY(-1px); box-shadow:var(--sh-md); text-decoration:none; }
.btn-diary:active { transform:translateY(0); }

.btn-diary-primary {
    background:var(--blue-grad); color:#fff;
    box-shadow:var(--sh-blue);
}
.btn-diary-primary:hover { filter:brightness(1.07); color:#fff; box-shadow:0 6px 20px rgba(29,111,206,.32); }

.btn-diary-ghost {
    background:var(--surface); color:var(--ink-soft);
    border:1.5px solid var(--rule-strong);
}
.btn-diary-ghost:hover { background:var(--blue-pale); color:var(--blue-deep); border-color:var(--blue); }

.btn-diary-warning {
    background:#fffbeb; color:var(--amber);
    border:1.5px solid #fde68a;
}
.btn-diary-warning:hover { background:var(--amber-pale); color:#92400e; }

.btn-diary-danger {
    background:#fff5f5; color:var(--rose);
    border:1.5px solid #fca5a5;
}
.btn-diary-danger:hover { background:var(--rose-pale); color:#991b1b; }

.btn-diary-success {
    background:#f0fdf4; color:var(--emerald);
    border:1.5px solid #bbf7d0;
}
.btn-diary-success:hover { background:var(--emerald-pale); color:#065f46; }

/* ── Cards ── */
.diary-card {
    background:var(--surface); border:1.5px solid var(--rule);
    border-radius:var(--r-xl); box-shadow:var(--sh-sm);
    overflow:hidden; margin-bottom:20px;
}
.diary-card-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px; border-bottom:1.5px solid var(--rule);
    background:var(--surface);
}
.diary-card-title {
    font-family:var(--font-serif); font-size:1rem; font-weight:700;
    color:var(--ink); margin:0;
}
.diary-card-body { padding:22px; }

/* ── Alerts ── */
.diary-alert {
    display:flex; align-items:flex-start; gap:10px;
    padding:12px 16px; border-radius:var(--r-md);
    font-size:.84rem; margin-bottom:18px;
    animation:slideUp .4s ease both;
}
.diary-alert.success { background:var(--emerald-pale); color:#065f46; border:1px solid #a7f3d0; }
.diary-alert.error   { background:var(--rose-pale);    color:#991b1b; border:1px solid #fca5a5; }
.diary-alert .da-close {
    margin-left:auto; background:none; border:none; cursor:pointer;
    color:inherit; opacity:.55; font-size:.9rem; padding:0; line-height:1;
}
.diary-alert .da-close:hover { opacity:1; }

/* ── Badges ── */
.dbadge {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 9px; border-radius:20px;
    font-size:.7rem; font-weight:600; letter-spacing:.03em; white-space:nowrap;
}
.dbadge-primary  { background:var(--blue-pale);    color:var(--blue-deep); }
.dbadge-success  { background:var(--emerald-pale); color:#065f46; }
.dbadge-warning  { background:var(--amber-pale);   color:#92400e; }
.dbadge-danger   { background:var(--rose-pale);    color:#991b1b; }
.dbadge-muted    { background:var(--slate-pale);   color:var(--slate); }
.dbadge-info     { background:var(--violet-pale);  color:var(--violet); }

/* ── Form Controls ── */
.diary-form-group { margin-bottom:20px; }
.diary-form-label {
    display:block; font-size:.8rem; font-weight:600;
    color:var(--ink-soft); margin-bottom:6px; letter-spacing:.01em;
}
.diary-form-label .req { color:var(--rose); margin-left:2px; }
.diary-form-control {
    width:100%; padding:10px 13px;
    font-family:var(--font-sans); font-size:.9rem; color:var(--ink);
    background:var(--surface); border:1.5px solid var(--rule-strong);
    border-radius:var(--r-md); transition:border-color .2s, box-shadow .2s;
    box-shadow:var(--sh-sm);
}
.diary-form-control:focus {
    outline:none; border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(29,111,206,.12), var(--sh-sm);
}
.diary-form-control.is-invalid { border-color:var(--rose); }
.diary-invalid-msg { font-size:.77rem; color:var(--rose); margin-top:4px; }
.diary-form-hint  { font-size:.75rem; color:var(--ink-muted); margin-top:5px; }

/* ── Table ── */
.diary-table-wrap { overflow-x:auto; }
.diary-table {
    width:100%; border-collapse:collapse;
    font-size:.85rem; color:var(--ink);
}
.diary-table thead th {
    padding:10px 14px; background:var(--paper);
    font-weight:600; font-size:.75rem; text-transform:uppercase;
    letter-spacing:.06em; color:var(--ink-muted);
    border-bottom:2px solid var(--rule); white-space:nowrap;
    cursor:pointer; user-select:none;
}
.diary-table thead th:hover { color:var(--blue); }
.diary-table tbody tr {
    border-bottom:1px solid var(--rule);
    transition:background .12s;
}
.diary-table tbody tr:last-child { border-bottom:none; }
.diary-table tbody tr:hover { background:var(--blue-pale); }
.diary-table td { padding:12px 14px; vertical-align:middle; }
</style>