@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400&family=Inter:wght@500;700&display=swap');

:root{
  /* Raw tokens dari Figma */
  --buccaneer: #622F30;
  --mahogany: #4E0606;
  --pippin: #FFE1DF;
  --fair-pink: #FFEFEC;
  --fantasy: #FAF3F0;
  --sauvignon: #FFF5F3;
  --chablis: #FFF4F3;
  --athens-gray: #EEF0F3;
  --cashmere: #E6BEA5;
  --albescent-white: #F5E9D3;
  --watercourse: #056F57;
  --vesuvius: #B14A0B;
  --tamarillo: #991613;
  --shiraz: #B20931;
  --ebony: #0C0B1D;
  --slate-gray: #708090;
  --gull-gray: #9DACB7;
  --coral-tree: #A86B6B;

  --bg-sidebar: var(--fair-pink);
  --bg-page: var(--fantasy);
  --bg-card: #FFFFFF;
  --maroon: var(--buccaneer);
  --maroon-dark: var(--mahogany);
  --maroon-soft: var(--pippin);
  --text-dark: var(--ebony);
  --text-muted: var(--slate-gray);
  --border: var(--athens-gray);
  --success: var(--watercourse);
  --warning: var(--vesuvius);
  --danger: var(--tamarillo);
  --radius:10px;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:'Inter',sans-serif;
    background:var(--bg-page);
    color:var(--text-dark);
}

/* CARD */

.card{
    background:#FFFDFD;
    border:1px solid #F2D7D2;
    border-radius:14px;
    padding:8px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.grid-2-uneven{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:16px;
}

/* TABLE */

table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
}

th{
    text-align:left;
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    font-size:12px;
}

td{
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    font-size:14px;
}

tr:last-child td{
    border-bottom:none;
}

/* BUTTON */

.btn{
    display:inline-block;
    padding:11px 22px;
    border:none;
    border-radius:12px;
    background:var(--maroon);
    color:white;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
}

.btn:hover{
    background:var(--maroon-dark);
}

.btn-block{
    width:100%;
}

/* FORM */

input[type=text],
input[type=password],
input[type=number],
input[type=date],
select,
textarea{

    width:100%;
    padding:11px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    font-size:14px;
}

.search-pill{
    max-width:280px;
    border-radius:999px;
    padding:10px 18px;
}

label{
    display:block;
    margin-bottom:6px;
}

.form-group{
    margin-bottom:16px;
}

/* ALERT */

.success-msg{
    background:#E6F4EC;
    color:var(--success);
    padding:10px 16px;
    border-radius:10px;
}

.error-msg{
    background:#FCE8E8;
    color:var(--danger);
    padding:10px 16px;
    border-radius:10px;
}

.badge-ok{
    color:var(--success);
}

.badge-warn{
    color:var(--danger);
}

/*==========================
SIDEBAR BRAND
==========================*/

.sidebar-brand{
display:flex;
align-items:flex-start;
gap:12px;
margin-bottom:34px;
}

.brand-icon{
width:30px;
height:30px;
border-radius:50%;
background:#FFFFFF;
border:1px solid #E6D8D3;
display:flex;
justify-content:center;
align-items:center;
font-family:'Inter',sans-serif;
font-size:13px;
font-weight:600;
color:var(--buccaneer);
flex-shrink:0;
}

.brand-text{
display:flex;
flex-direction:column;
justify-content:center;
padding-top:1px;
}

.brand-name{
font-family:'Outfit',sans-serif;
font-size:15px;
font-weight:700;
line-height:18px;
color:var(--buccaneer);
}

.brand-sub{
margin-top:2px;
font-family:'Outfit',sans-serif;
font-size:11px;
font-weight:700;
line-height:14px;
color:var(--coral-tree);
}