/* Raja Coffee Bar — admin design system (login, POS, CRM, orders) */
:root{
  --ink:#134C30; --paper:#F4F5F1; --turmeric:#B9DCC4; --chili:#0F3D27; --leaf:#4E6B5A; --char:#161816; --halal:#2E7D4F; --danger:#B8402A; --pending:#A86A12;
  /* Brand palette from the Raja Coffee Bar logo: deep green, black, white.
     Variable names are kept from the original design system. ink = brand green,
     turmeric = light-green highlight (used on the dark header), chili = darker
     green for buttons and amounts, leaf = muted green-grey for labels,
     pending = amber so new/unpaid stands apart from the greens. */
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--paper); color:var(--char); font-family:'Work Sans', sans-serif;}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:600;}
.mono{font-family:'IBM Plex Mono', monospace;}
.wrap{max-width:1100px; margin:0 auto; padding:0 32px;}
a{color:inherit;}

header{background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:space-between; padding:14px 24px;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none;}
.logo img{width:40px; height:40px; border-radius:6px; object-fit:contain; background:#fff; padding:2px;}
.logo-text{font-family:'Fraunces', serif; font-size:16px; font-weight:600; color:var(--paper);}
.logo-text .tag{font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--turmeric); letter-spacing:1px; text-transform:uppercase;}
.header-right{display:flex; align-items:center; gap:22px;}
.navlinks{display:flex; gap:22px; font-family:'IBM Plex Mono', monospace; font-size:12px;}
.navlinks a{color:var(--paper); opacity:0.75; text-decoration:none;}
.navlinks a.active{opacity:1; border-bottom:1px solid var(--turmeric); padding-bottom:3px;}
.logout{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--paper); opacity:0.8; text-decoration:underline; cursor:pointer; background:none; border:none;}

/* Stats + table (CRM / Orders) */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:32px;}
.stat-card{background:#FFFFFF; border:1px solid #E1E5E0; border-radius:2px; padding:18px 20px;}
.stat-card .label{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.8px; text-transform:uppercase; color:var(--leaf); margin-bottom:8px;}
.stat-card .value{font-family:'Fraunces', serif; font-size:26px; color:var(--ink); font-weight:600;}

.content{padding:0 32px 40px; display:grid; grid-template-columns:1fr 380px; gap:24px;}
.content.single{grid-template-columns:1fr;}
.content > *{min-width:0;}

.search{width:100%; padding:11px 14px; border:1px solid #CFD6D0; border-radius:2px; background:#FFFFFF; font-family:'Work Sans', sans-serif; font-size:13.5px; margin-bottom:16px;}

table{width:100%; border-collapse:collapse; background:#FFFFFF; border:1px solid #E1E5E0;}
th{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.6px; text-transform:uppercase; color:var(--leaf); text-align:left; padding:12px 16px; border-bottom:1px solid #E1E5E0;}
td{padding:13px 16px; font-size:13.5px; border-bottom:1px solid #E8ECE7;}
tr:hover td{background:#EEF5F0; cursor:pointer;}
.cust-name{font-family:'Fraunces', serif; font-weight:500; color:var(--ink);}
.cust-phone{font-family:'IBM Plex Mono', monospace; font-size:12px; color:#76807A;}
.spent{font-family:'IBM Plex Mono', monospace; color:var(--chili); font-weight:500;}
tr.selected td{background:#DDEDE2;}

.detail{background:#FFFFFF; border:1px solid #E1E5E0; border-radius:2px; padding:22px; align-self:flex-start;}
.detail h3{font-size:17px; color:var(--ink); margin-bottom:4px;}
.detail .phone{font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:#76807A; margin-bottom:18px;}
.detail-row{display:flex; justify-content:space-between; font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:#56605A; padding:6px 0; border-bottom:1px solid #E8ECE7;}
.order-hist{margin-top:18px;}
.order-hist h4{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.6px; text-transform:uppercase; color:var(--leaf); margin-bottom:10px;}
.mini-order{display:flex; justify-content:space-between; font-size:13px; padding:9px 0; border-bottom:1px dashed #CFD6D0;}
.mini-order .date{font-family:'IBM Plex Mono', monospace; font-size:11px; color:#76807A;}
.empty-hint{color:#98A19B; font-family:'IBM Plex Mono', monospace; font-size:12.5px; padding:20px 0; text-align:center;}

.badge{display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.4px; padding:3px 10px; border-radius:20px; border:1px solid; text-transform:uppercase;}
.badge.status-new{color:var(--pending); border-color:var(--pending);}
.badge.status-preparing{color:var(--leaf); border-color:var(--leaf);}
.badge.status-completed{color:var(--halal); border-color:var(--halal);}
.badge.status-cancelled{color:var(--danger); border-color:var(--danger);}
.badge.pay-paid{color:var(--halal); border-color:var(--halal);}
.badge.pay-pending{color:var(--pending); border-color:var(--pending);}

.status-select{
  appearance:none; -webkit-appearance:none;
  background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A8370'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.4px; text-transform:uppercase;
  padding:4px 24px 4px 10px; border-radius:20px; border:1px solid; cursor:pointer;
}
.status-select.status-new{color:var(--pending); border-color:var(--pending);}
.status-select.status-preparing{color:var(--leaf); border-color:var(--leaf);}
.status-select.status-completed{color:var(--halal); border-color:var(--halal);}
.status-select.status-cancelled{color:var(--danger); border-color:var(--danger);}
.status-select:disabled{opacity:0.5; cursor:wait;}
.status-saved-flash{animation:status-flash 1s ease;}
@keyframes status-flash{0%{background:#DDEDE2;} 100%{background:transparent;}}
.src-tag{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:#76807A; text-transform:uppercase;}

/* POS */
.layout{display:grid; grid-template-columns:1fr 380px; height:calc(100vh - 61px);}
.picker{padding:20px 24px; overflow-y:auto;}
.tabs{display:flex; gap:8px; margin-bottom:18px;}
.tab{font-family:'IBM Plex Mono', monospace; font-size:12px; padding:8px 16px; border:1px solid #CFD6D0; border-radius:20px; background:#FFFFFF; color:#56605A; cursor:pointer;}
.tab.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px;}
.item-card{background:#FFFFFF; border:1px solid #E1E5E0; border-radius:2px; padding:14px; cursor:pointer; text-align:left; position:relative; font-family:inherit; display:flex; flex-direction:column; align-items:flex-start;}
.item-card:hover{border-color:var(--ink);}
.item-card .name{font-family:'Fraunces', serif; font-size:14.5px; color:var(--ink); font-weight:500; margin-bottom:4px; line-height:1.25;}
.item-card .name-ta{font-size:12.5px; color:var(--leaf); margin-bottom:8px; line-height:1.3;}
.item-card .avail-badge{display:inline-block; max-width:100%; white-space:normal; font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:0.4px; color:var(--chili); border:1px solid var(--chili); border-radius:10px; padding:2px 9px; margin-bottom:8px;}
.item-card .price{font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--chili); font-weight:500; margin-top:auto;}
.item-card .unit-inline{font-size:11px; color:#76807A; font-weight:400;}
.item-card .badge2 + .name{margin-top:22px;}

.ticket-pane{background:#FFFFFF; border-left:1px solid #E1E5E0; display:flex; flex-direction:column; padding:22px 22px 18px;}
.ticket-pane h3{font-size:15px; color:var(--ink); margin-bottom:14px;}
.cart-list{flex:1; overflow-y:auto; border-top:1.5px dashed #BCC5BE; border-bottom:1.5px dashed #BCC5BE; padding:10px 0;}
.cart-row{display:flex; justify-content:space-between; align-items:center; padding:9px 0; font-family:'IBM Plex Mono', monospace; font-size:13px; gap:8px;}
.cart-row .item-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cart-row .qty-mini{display:flex; align-items:center; gap:8px; color:#76807A;}
.cart-row .qty-mini button{width:20px; height:20px; border-radius:50%; border:1px solid #CFD6D0; background:var(--paper); cursor:pointer; font-size:12px; font-family:inherit;}
.cart-empty{color:#98A19B; font-family:'IBM Plex Mono', monospace; font-size:12.5px; text-align:center; padding:30px 0;}

.totals{padding:14px 0;}
.total-row{display:flex; justify-content:space-between; font-family:'IBM Plex Mono', monospace; font-size:13px; color:#56605A; padding:4px 0;}
.total-row.grand{font-size:18px; color:var(--ink); font-weight:500; padding-top:8px;}

.fulfil-toggle{display:flex; gap:8px; margin-bottom:14px;}
.fulfil-toggle button{flex:1; padding:9px; border:1px solid #CFD6D0; background:transparent; border-radius:2px; font-size:12.5px; font-weight:500; cursor:pointer; font-family:inherit;}
.fulfil-toggle button.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

.pay-row{display:flex; gap:8px; margin-bottom:12px;}
.pay-row button{flex:1; padding:10px; border:1px solid #CFD6D0; background:#FFFFFF; border-radius:2px; font-size:12.5px; font-weight:500; cursor:pointer; font-family:inherit;}
.pay-row button.active{background:var(--turmeric); border-color:var(--turmeric); color:var(--ink);}

.print-btn{width:100%; background:var(--ink); color:var(--paper); border:none; padding:14px; border-radius:2px; font-family:'Work Sans', sans-serif; font-weight:600; font-size:14.5px; cursor:pointer;}
.print-btn:disabled{opacity:0.5; cursor:not-allowed;}
.new-order{width:100%; margin-top:8px; background:transparent; color:var(--ink); border:1px solid var(--ink); padding:10px; border-radius:2px; font-size:13px; cursor:pointer; font-family:inherit;}

/* Login */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--paper); padding:24px;}
.login-card{background:#FFFFFF; border:1px solid #E1E5E0; border-radius:2px; padding:40px 36px; width:100%; max-width:360px; box-shadow:0 18px 40px rgba(28,43,34,0.10);}
.login-card .logo{justify-content:center; margin-bottom:8px;}
.login-card .logo img{width:200px; height:auto; border-radius:0; padding:0;}
.login-card .logo-text{color:var(--ink); font-size:18px; text-align:center;}
.login-card .tag{display:block; font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--leaf); letter-spacing:1.5px; text-transform:uppercase; text-align:center; margin-top:4px;}
.login-card h1{font-size:20px; color:var(--ink); text-align:center; margin:20px 0 24px;}
.field{margin-bottom:16px;}
.field label{display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.5px; text-transform:uppercase; color:var(--leaf); margin-bottom:6px;}
.field input, .field select, .field textarea{width:100%; border:1px solid #CFD6D0; background:var(--paper); border-radius:2px; padding:11px 13px; font-family:'Work Sans', sans-serif; font-size:14px; color:var(--char);}
.login-btn{width:100%; margin-top:6px; background:var(--ink); color:var(--paper); border:none; font-family:'Work Sans', sans-serif; font-weight:600; font-size:15px; padding:14px; border-radius:2px; cursor:pointer;}
.login-error{background:#FBEAE6; border:1px solid var(--danger); color:var(--danger); font-size:13px; padding:10px 13px; border-radius:2px; margin-bottom:16px;}
.login-note{background:#FBF3E4; border:1px solid #E8D3AE; color:var(--pending); font-size:13px; padding:10px 13px; border-radius:2px; margin-bottom:16px;}

/* Products */
.form-card{background:#FFFFFF; border:1px solid #E1E5E0; border-radius:2px; padding:24px 26px; margin-bottom:24px; max-width:520px;}
.form-row{display:flex; gap:16px;}
.form-row .field{flex:1;}
.checkbox-row{display:flex; flex-wrap:wrap; gap:10px 16px; padding:2px 0;}
.checkbox-row label{display:flex; align-items:center; gap:6px; font-family:'Work Sans', sans-serif; font-size:13.5px; color:var(--char); text-transform:none; letter-spacing:normal;}
.checkbox-row input{width:auto;}
.radio-row{display:flex; gap:20px; margin-bottom:10px; font-family:'Work Sans', sans-serif; font-size:13.5px;}
.radio-row label{display:flex; align-items:center; gap:6px;}
.radio-row input{width:auto;}
.form-actions{display:flex; gap:12px; align-items:center; margin-top:20px;}
.btn-secondary{background:transparent; color:var(--ink); border:1px solid var(--ink); font-family:'Work Sans', sans-serif; font-weight:600; font-size:13.5px; padding:11px 20px; border-radius:2px; cursor:pointer; text-decoration:none; display:inline-block;}
.btn-primary-sm{background:var(--ink); color:var(--paper); border:none; font-family:'Work Sans', sans-serif; font-weight:600; font-size:13.5px; padding:12px 22px; border-radius:2px; cursor:pointer;}
.list-actions{margin-bottom:16px;}
.edit-link{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--chili); text-decoration:underline;}
.out-of-stock{opacity:0.5;}

@media (max-width:900px){
  .content{grid-template-columns:1fr;}
  .layout{grid-template-columns:1fr; height:auto;}
  .stats{grid-template-columns:repeat(2,1fr); padding:20px;}
}

@media (max-width:520px){
  header{flex-wrap:wrap; gap:12px; padding:14px 20px;}
  .header-right{gap:16px;}
}