/* ==========================================================================
   DoseSaathi - iOS inspired UI, deep blue water palette
   ========================================================================== */

:root {
    /* ocean scale */
    --ocean-950: #04172b;
    --ocean-900: #062743;
    --ocean-800: #0a3a5c;
    --ocean-700: #0d4f7c;
    --ocean-600: #0f69a8;
    --ocean-500: #1a82c8;
    --ocean-400: #45a7e3;
    --ocean-300: #86c9f0;
    --ocean-100: #dcecf8;
    --ocean-50: #eff7fd;

    --ios-green: #30b566;
    --ios-red: #e5484d;
    --ios-orange: #f08c23;
    --ios-yellow: #e8b530;
    --ios-purple: #6b6bd6;

    --bg: #eef3f8;
    --surface: #ffffff;
    --surface-2: #f7fafd;
    --line: #e2eaf2;
    --text: #0d1f30;
    --text-2: #5b7489;
    --text-3: #8ca3b6;

    --r-sm: 10px;
    --r: 14px;
    --r-lg: 20px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(6, 39, 67, .06), 0 1px 3px rgba(6, 39, 67, .04);
    --shadow: 0 4px 16px rgba(6, 39, 67, .08);
    --shadow-lg: 0 18px 48px rgba(6, 39, 67, .18);

    --sidebar: 248px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Icon System – SVG mask-based icons (inherits color via currentColor)
   ========================================================================== */

[class*="icon-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: -0.125em;
}

/* Medical cross – brand/logo */
.icon-med {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4 11h-3v3a1 1 0 0 1-2 0v-3H8a1 1 0 0 1 0-2h3V8a1 1 0 0 1 2 0v3h3a1 1 0 0 1 0 2z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4 11h-3v3a1 1 0 0 1-2 0v-3H8a1 1 0 0 1 0-2h3V8a1 1 0 0 1 2 0v3h3a1 1 0 0 1 0 2z' fill='%23000'/%3E%3C/svg%3E");
}

/* Home/dashboard */
.icon-home {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z' fill='%23000'/%3E%3C/svg%3E");
}

/* POS/new bill – plus in circle */
.icon-pos {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z' fill='%23000'/%3E%3C/svg%3E");
}

/* Sales/bills – receipt with lines */
.icon-sales {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2v20l2-1.5L8 22l2-1.5L12 22l2-1.5L16 22l2-1.5L20 22V2H4zm12 14H8v-2h8v2zm0-4H8v-2h8v2zm0-4H8V6h8v2z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2v20l2-1.5L8 22l2-1.5L12 22l2-1.5L16 22l2-1.5L20 22V2H4zm12 14H8v-2h8v2zm0-4H8v-2h8v2zm0-4H8V6h8v2z' fill='%23000'/%3E%3C/svg%3E");
}

/* Medicines/stock – pill capsule */
.icon-stock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.22 11.29l5.07-5.07a6 6 0 0 1 8.49 8.49l-5.07 5.07a6 6 0 0 1-8.49-8.49zm4.24-.71l4.95-4.95a3.58 3.58 0 0 1 5.07 0L13.41 10.7l-4.95-.12z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.22 11.29l5.07-5.07a6 6 0 0 1 8.49 8.49l-5.07 5.07a6 6 0 0 1-8.49-8.49zm4.24-.71l4.95-4.95a3.58 3.58 0 0 1 5.07 0L13.41 10.7l-4.95-.12z' fill='%23000'/%3E%3C/svg%3E");
}

/* Batch stock – grid/boxes */
.icon-batch {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z' fill='%23000'/%3E%3C/svg%3E");
}

/* Expiry alert – hourglass */
.icon-expiry {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2v6l4 4-4 4v6h12v-6l-4-4 4-4V2H6zm10 15.5V20H8v-2.5l4-4 4 4zM12 12L8 8V4h8v4l-4 4z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2v6l4 4-4 4v6h12v-6l-4-4 4-4V2H6zm10 15.5V20H8v-2.5l4-4 4 4zM12 12L8 8V4h8v4l-4 4z' fill='%23000'/%3E%3C/svg%3E");
}

/* Warning/low stock – triangle with exclamation */
.icon-warn {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z' fill='%23000'/%3E%3C/svg%3E");
}

/* Categories – three horizontal lines */
.icon-cat {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z' fill='%23000'/%3E%3C/svg%3E");
}

/* Suppliers – truck */
.icon-supplier {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zM18 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zM18 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z' fill='%23000'/%3E%3C/svg%3E");
}

/* Customers – person silhouette */
.icon-customer {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z' fill='%23000'/%3E%3C/svg%3E");
}

/* Cash book – book with currency */
.icon-cashbook {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-3 12.5h-1.5V16h-1v-1.5H11v-1h1.5V12h1v1.5H15v1zm0-4H9v-1h6v1zm0-3H9V6h6v1.5z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-3 12.5h-1.5V16h-1v-1.5H11v-1h1.5V12h1v1.5H15v1zm0-4H9v-1h6v1zm0-3H9V6h6v1.5z' fill='%23000'/%3E%3C/svg%3E");
}

/* Rupee sign – expenses/currency */
.icon-rupee {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h8v2h-3.5c.85.63 1.45 1.63 1.6 2.79H16v2h-1.9c-.16 1.16-.76 2.16-1.6 2.79L16 18h-2.5l-3.4-5.42H8v-2h2.1c-.16-1.16-.76-2.16-1.6-2.79H8V5h1.5c.85.63 1.45 1.63 1.6 2.79h1.78c-.16-1.16-.76-2.16-1.6-2.79H8V3zm4 18c-5.52 0-10-4.48-10-10S6.48 1 12 1s10 4.48 10 10-4.48 10-10 10z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h8v2h-3.5c.85.63 1.45 1.63 1.6 2.79H16v2h-1.9c-.16 1.16-.76 2.16-1.6 2.79L16 18h-2.5l-3.4-5.42H8v-2h2.1c-.16-1.16-.76-2.16-1.6-2.79H8V5h1.5c.85.63 1.45 1.63 1.6 2.79h1.78c-.16-1.16-.76-2.16-1.6-2.79H8V3zm4 18c-5.52 0-10-4.48-10-10S6.48 1 12 1s10 4.48 10 10-4.48 10-10 10z' fill='%23000'/%3E%3C/svg%3E");
}

/* Reports – bar chart */
.icon-report {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9.2h3V19H5V9.2zM10.6 5h2.8v14h-2.8V5zm5.6 8H19v6h-2.8v-6z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9.2h3V19H5V9.2zM10.6 5h2.8v14h-2.8V5zm5.6 8H19v6h-2.8v-6z' fill='%23000'/%3E%3C/svg%3E");
}

/* Staff/roles – two people */
.icon-users {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z' fill='%23000'/%3E%3C/svg%3E");
}

/* Import data – upload arrow */
.icon-import {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z' fill='%23000'/%3E%3C/svg%3E");
}

/* Bell – alerts */
.icon-bell {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z' fill='%23000'/%3E%3C/svg%3E");
}

/* Settings – gear/cog */
.icon-settings {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84a.48.48 0 0 0-.48.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87a.48.48 0 0 0 .12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.26.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84a.48.48 0 0 0-.48.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87a.48.48 0 0 0 .12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.26.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z' fill='%23000'/%3E%3C/svg%3E");
}

/* Upgrade – rocket */
.icon-upgrade {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.5 5.4 7 9.2 7 13l-4 2 2.5 2.5L7 22l3-3c.67.33 1.33.5 2 .5s1.33-.17 2-.5l3 3 1.5-4.5L21 15l-4-2c0-3.8-1.5-7.6-5-11zm0 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.5 5.4 7 9.2 7 13l-4 2 2.5 2.5L7 22l3-3c.67.33 1.33.5 2 .5s1.33-.17 2-.5l3 3 1.5-4.5L21 15l-4-2c0-3.8-1.5-7.6-5-11zm0 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z' fill='%23000'/%3E%3C/svg%3E");
}

/* Audit log – clipboard with checkmark */
.icon-audit {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM10 17l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM10 17l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z' fill='%23000'/%3E%3C/svg%3E");
}

/* Purchase entry – download arrow into box */
.icon-purchase {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z' fill='%23000'/%3E%3C/svg%3E");
}

/* Supplier return – arrow up from box */
.icon-return {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z' fill='%23000'/%3E%3C/svg%3E");
}

/* Purchase order – pencil/edit */
.icon-po {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z' fill='%23000'/%3E%3C/svg%3E");
}

/* Barcode labels – barcode lines */
.icon-barcode {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h2v16H2V4zm4 0h1v16H6V4zm3 0h2v16H9V4zm4 0h1v16h-1V4zm3 0h3v16h-3V4zm5 0h1v16h-1V4z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h2v16H2V4zm4 0h1v16H6V4zm3 0h2v16H9V4zm4 0h1v16h-1V4zm3 0h3v16h-3V4zm5 0h1v16h-1V4z' fill='%23000'/%3E%3C/svg%3E");
}

/* Prescription – Rx symbol */
.icon-rx {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3v18h2v-7h1.5l4.5 7h2.5l-4.7-7.27A4.5 4.5 0 0 0 8 3H6zm2 2h.5a2.5 2.5 0 0 1 0 5H8V5zm8 4l3.5 3.5-1.41 1.41L14.59 10.4 13.17 11.83 14.59 13.24l-1.42 1.42-1.41-1.42-1.42 1.42 1.42 1.41-1.42 1.42L8.93 16.07l1.41-1.42 1.42 1.42 1.41-1.42-1.41-1.41 1.41-1.42 1.42 1.42 1.41-1.42-1.41-1.41L16 9z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3v18h2v-7h1.5l4.5 7h2.5l-4.7-7.27A4.5 4.5 0 0 0 8 3H6zm2 2h.5a2.5 2.5 0 0 1 0 5H8V5zm8 4l3.5 3.5-1.41 1.41L14.59 10.4 13.17 11.83 14.59 13.24l-1.42 1.42-1.41-1.42-1.42 1.42 1.42 1.41-1.42 1.42L8.93 16.07l1.41-1.42 1.42 1.42 1.41-1.42-1.41-1.41 1.41-1.42 1.42 1.42 1.41-1.42-1.41-1.41L16 9z' fill='%23000'/%3E%3C/svg%3E");
}

/* Store – storefront building */
.icon-store {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z' fill='%23000'/%3E%3C/svg%3E");
}

/* Switch store – two arrows left-right */
.icon-switch {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z' fill='%23000'/%3E%3C/svg%3E");
}

/* Help – question mark in circle */
.icon-help {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z' fill='%23000'/%3E%3C/svg%3E");
}

/* Logout – power symbol */
.icon-logout {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42A6.92 6.92 0 0 1 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.05.88-3.89 2.29-5.17L5.88 5.46A8.96 8.96 0 0 0 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9a8.96 8.96 0 0 0-3.17-6.83z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42A6.92 6.92 0 0 1 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.05.88-3.89 2.29-5.17L5.88 5.46A8.96 8.96 0 0 0 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9a8.96 8.96 0 0 0-3.17-6.83z' fill='%23000'/%3E%3C/svg%3E");
}

/* Star – super admin */
.icon-star {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23000'/%3E%3C/svg%3E");
}

/* Menu hamburger – three lines (topbar) */
.icon-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z' fill='%23000'/%3E%3C/svg%3E");
}

.icon-profit {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z' fill='%23000'/%3E%3C/svg%3E");
}
.icon-close {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z' fill='%23000'/%3E%3C/svg%3E");
}
.icon-lock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6A5 5 0 007 6v2H6a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V10a2 2 0 00-2-2zM12 17a2 2 0 110-4 2 2 0 010 4zM9 8V6a3 3 0 016 0v2H9z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6A5 5 0 007 6v2H6a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V10a2 2 0 00-2-2zM12 17a2 2 0 110-4 2 2 0 010 4zM9 8V6a3 3 0 016 0v2H9z' fill='%23000'/%3E%3C/svg%3E");
}

/* ==========================================================================
   End Icon System
   ========================================================================== */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.45;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ocean-600); text-decoration: none; }
a:hover { color: var(--ocean-700); }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.02em; }

.muted { color: var(--text-2); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }
.bold { font-weight: 650; }
.hide { display: none !important; }

/* ============================================================ auth screens */

.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(1100px 700px at 15% -10%, var(--ocean-600) 0%, transparent 60%),
        radial-gradient(900px 600px at 100% 100%, var(--ocean-500) 0%, transparent 55%),
        linear-gradient(160deg, var(--ocean-950), var(--ocean-800));
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(24px) saturate(180%);
    border-radius: 26px;
    padding: 34px 28px 28px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.auth-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(160deg, var(--ocean-500), var(--ocean-800));
    box-shadow: 0 10px 24px rgba(15, 105, 168, .38);
}

.auth-card h1 { font-size: 22px; }
.auth-card > p { margin: 6px 0 22px; font-size: 13.5px; }
.auth-card form { text-align: left; }

.hint-list { text-align: left; font-size: 13px; color: var(--text-2); padding-left: 20px; }

/* ==================================================================== shell */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar);
    flex: 0 0 var(--sidebar);
    background: linear-gradient(185deg, var(--ocean-900) 0%, var(--ocean-800) 55%, var(--ocean-700) 100%);
    color: #fff;
    padding: 18px 12px 24px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 6px 10px 18px; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    font-size: 19px; background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.brand-name { font-weight: 680; font-size: 15.5px; letter-spacing: -.01em; }
.brand-sub { font-size: 11px; color: var(--ocean-300); }

.nav-group { margin-bottom: 14px; }
.nav-label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
    color: rgba(255, 255, 255, .45); padding: 0 12px 6px; font-weight: 650;
}

.nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: var(--r-sm);
    color: rgba(255, 255, 255, .84); font-size: 14px; font-weight: 500;
    transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.nav-item.active { background: rgba(255, 255, 255, .17); color: #fff; font-weight: 600; }
.nav-item .ico { width: 20px; text-align: center; font-size: 15px; opacity: .95; }
.nav-item .badge-dot {
    margin-left: auto; background: var(--ios-red); color: #fff;
    font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--r-pill);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 22px;
    background: rgba(238, 243, 248, .82);
    backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 21px; }
.topbar .sub { font-size: 12.5px; color: var(--text-2); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.avatar {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(160deg, var(--ocean-500), var(--ocean-700));
    color: #fff; font-size: 13px; font-weight: 650;
}

.menu-btn { display: none; }

.content { padding: 20px 22px 40px; flex: 1; }
.content.tight { padding: 14px 16px 30px; }

/* ==================================================================== cards */

.card {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
    overflow: hidden;
}
.card + .card { margin-top: 16px; }
.card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, var(--surface-2));
}
.card-head h2 { font-size: 15.5px; }
.card-head .spacer { margin-left: auto; }
.card-body { padding: 16px 18px; }
.card-body.flush { padding: 0; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ================================================================== metrics */

.stat {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 15px 16px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.stat .label { font-size: 12px; color: var(--text-2); font-weight: 550; }
.stat .value { font-size: 25px; font-weight: 680; letter-spacing: -.03em; margin-top: 4px; }
.stat .foot { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.stat .chip-ico {
    position: absolute; top: 13px; right: 13px; width: 32px; height: 32px;
    border-radius: 10px; display: grid; place-items: center; font-size: 15px;
    background: var(--ocean-50); color: var(--ocean-600);
}
.stat.hero {
    background: linear-gradient(150deg, var(--ocean-700), var(--ocean-500));
    border-color: transparent; color: #fff;
    box-shadow: 0 12px 28px rgba(13, 79, 124, .3);
}
.stat.hero .label, .stat.hero .foot { color: rgba(255, 255, 255, .8); }
.stat.hero .chip-ico { background: rgba(255, 255, 255, .18); color: #fff; }
.stat.danger .chip-ico { background: #fdeaea; color: var(--ios-red); }
.stat.warn .chip-ico { background: #fdf1e3; color: var(--ios-orange); }
.stat.good .chip-ico { background: #e7f7ee; color: var(--ios-green); }

/* =================================================================== tables */

.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13.8px; }
table.tbl th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-2); font-weight: 650; padding: 10px 14px;
    background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.tbl td { padding: 11px 14px; border-bottom: 1px solid #eef3f8; vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--ocean-50); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl.compact td, table.tbl.compact th { padding: 8px 10px; }

.empty { padding: 44px 20px; text-align: center; color: var(--text-2); }
.empty .ico { font-size: 34px; display: block; margin-bottom: 8px; opacity: .5; }

/* =================================================================== pills */

.pill {
    display: inline-block; padding: 2.5px 9px; border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 620; background: var(--ocean-50); color: var(--ocean-700);
    white-space: nowrap;
}
.pill.green { background: #e7f7ee; color: #1b8a4b; }
.pill.red { background: #fdeaea; color: #c22c31; }
.pill.orange { background: #fdf1e3; color: #b96a10; }
.pill.yellow { background: #fcf6e0; color: #96761a; }
.pill.grey { background: #eef2f6; color: #5b7489; }
.pill.purple { background: #ececfb; color: #4f4fc0; }

/* ================================================================== buttons */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid transparent;
    font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
    background: #fff; color: var(--ocean-700); border-color: var(--line);
    transition: transform .08s ease, filter .15s, background .15s;
    text-decoration: none; line-height: 1.3;
}
.btn:active { transform: scale(.97); }
.btn:hover { background: var(--surface-2); }
.btn-primary {
    background: linear-gradient(170deg, var(--ocean-500), var(--ocean-700));
    color: #fff; border-color: transparent; box-shadow: 0 5px 14px rgba(15, 105, 168, .28);
}
.btn-primary:hover { filter: brightness(1.06); background: linear-gradient(170deg, var(--ocean-500), var(--ocean-700)); }
.btn-danger { background: var(--ios-red); color: #fff; }
.btn-danger:hover { background: #d13b40; }
.btn-success { background: var(--ios-green); color: #fff; }
.btn-success:hover { background: #28a25b; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ocean-600); }
.btn-ghost:hover { background: var(--ocean-50); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-xs { padding: 4px 9px; font-size: 11.5px; }
.btn-lg { padding: 13px 22px; font-size: 16px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* =================================================================== forms */

.field { margin-bottom: 14px; }
.field > label {
    display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2);
    margin-bottom: 5px; letter-spacing: -.01em;
}
.field > label.switch { display: inline-flex; align-items: center; font-size: 14px; color: var(--text); font-weight: 500; margin-bottom: 0; }
.field > label.switch > span:last-child { margin-left: 2px; }
.field .help { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], input[type=tel], input[type=search], input[type=month], select, textarea {
    width: 100%; padding: 10px 13px; font-family: var(--font); font-size: 14.5px;
    color: var(--text); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
    appearance: none;
}
select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235b7489' stroke-width='1.6' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--ocean-400); background: #fff;
    box-shadow: 0 0 0 3.5px rgba(69, 167, 227, .18);
}
input[readonly] { background: #eef2f6; color: var(--text-2); }
textarea { min-height: 76px; resize: vertical; }

.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; }

.form-grid { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* iOS toggle */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.switch input { display: none; }
.switch .track {
    width: 46px; height: 28px; border-radius: var(--r-pill); background: #cfdae4;
    position: relative; transition: background .2s; flex: 0 0 auto;
}
.switch .track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s;
}
.switch input:checked + .track { background: var(--ios-green); }
.switch input:checked + .track::after { transform: translateX(18px); }

/* segmented control */
.seg {
    display: inline-flex; background: #e6ecf3; border-radius: var(--r-sm); padding: 2px; gap: 2px;
}
.seg a, .seg button {
    padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
    color: var(--text-2); border: 0; background: transparent; cursor: pointer; font-family: var(--font);
}
.seg a.active, .seg button.active { background: #fff; color: var(--ocean-700); box-shadow: var(--shadow-sm); }

/* ================================================================== alerts */

.alert {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 14px; border-radius: var(--r); font-size: 13.8px; margin-bottom: 14px;
    border: 1px solid transparent;
}
.alert.ok { background: #e7f7ee; color: #176b3c; border-color: #c6ebd6; }
.alert.err { background: #fdeaea; color: #a92429; border-color: #f6cfd0; }
.alert.warn { background: #fdf4e6; color: #8a5a10; border-color: #f6e2c2; }
.alert.info { background: var(--ocean-50); color: var(--ocean-700); border-color: var(--ocean-100); }

.toast-stack { position: fixed; top: 14px; right: 14px; z-index: 300; display: grid; gap: 8px; }
.toast {
    background: rgba(6, 39, 67, .94); color: #fff; padding: 11px 16px; border-radius: var(--r);
    font-size: 13.5px; box-shadow: var(--shadow-lg); animation: toast-in .25s ease;
    backdrop-filter: blur(10px); max-width: 320px;
}
.toast.err { background: rgba(190, 40, 45, .95); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }

/* ================================================================== modal */

.modal-back {
    position: fixed; inset: 0; background: rgba(6, 39, 67, .42);
    backdrop-filter: blur(3px); z-index: 200; display: grid; place-items: center; padding: 18px;
}
.modal {
    background: #fff; border-radius: 22px; width: 100%; max-width: 440px;
    box-shadow: var(--shadow-lg); animation: pop .2s ease; max-height: 90vh; overflow: auto;
}
.modal.wide { max-width: 760px; }
.modal-head { padding: 16px 20px 0; }
.modal-head h3 { font-size: 17px; }
.modal-body { padding: 14px 20px; }
.modal-foot { padding: 0 20px 18px; display: flex; gap: 8px; justify-content: flex-end; }
@keyframes pop { from { opacity: 0; transform: scale(.95) } to { opacity: 1; transform: none } }

/* ============================================================ list (iOS) */

.ios-list { background: #fff; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.ios-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 15px;
    border-bottom: 1px solid #eef3f8; color: var(--text);
}
.ios-row:last-child { border-bottom: 0; }
.ios-row:hover { background: var(--surface-2); }
.ios-row .t { font-weight: 580; font-size: 14.2px; }
.ios-row .s { font-size: 12.2px; color: var(--text-2); }
.ios-row .r { margin-left: auto; text-align: right; }

/* =================================================================== POS */

.pos-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 358px; gap: 16px; align-items: start; }

.search-box { position: relative; }
.search-box input { padding-left: 38px; font-size: 15.5px; padding-top: 12px; padding-bottom: 12px; }
.search-box .mag { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); }

.suggest {
    position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--shadow-lg); max-height: 330px; overflow-y: auto;
}
.suggest-item { padding: 10px 14px; border-bottom: 1px solid #eef3f8; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.suggest-item:last-child { border-bottom: 0; }
.suggest-item.sel, .suggest-item:hover { background: var(--ocean-50); }
.suggest-item .nm { font-weight: 600; font-size: 14px; }
.suggest-item .mt { font-size: 11.8px; color: var(--text-2); }
.suggest-item .rr { margin-left: auto; text-align: right; font-size: 12px; }

.cart-input {
    width: 100%; border: 1px solid var(--line); background: var(--surface-2);
    border-radius: 8px; padding: 6px 8px; font-size: 13.5px; font-family: var(--font);
    text-align: right; font-variant-numeric: tabular-nums;
}
.cart-input:focus { border-color: var(--ocean-400); background: #fff; box-shadow: 0 0 0 3px rgba(69, 167, 227, .16); }
.cart-input.w60 { width: 64px; }
.cart-input.w80 { width: 82px; }

.totals { display: grid; gap: 7px; font-size: 14px; }
.totals .row { display: flex; justify-content: space-between; }
.totals .row.grand {
    border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 10px;
    font-size: 21px; font-weight: 700; color: var(--ocean-700);
}

.paymode { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.paymode label {
    text-align: center; padding: 9px 2px; border-radius: var(--r-sm); border: 1px solid var(--line);
    background: var(--surface-2); font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text-2);
}
.paymode input { display: none; }
.paymode input:checked + span { color: #fff; }
.paymode label:has(input:checked) { background: var(--ocean-600); border-color: var(--ocean-600); color: #fff; }

/* ================================================================= invoice */

.inv-sheet {
    background: #fff; max-width: 820px; margin: 0 auto; padding: 30px 34px;
    border-radius: var(--r-lg); box-shadow: var(--shadow); border: 1px solid var(--line);
}
.inv-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid var(--ocean-700); padding-bottom: 14px; }
.inv-head .store-name { font-size: 22px; font-weight: 700; color: var(--ocean-800); }
.inv-title { text-align: right; }
.inv-title h2 { font-size: 17px; color: var(--ocean-700); }
.inv-meta { display: flex; gap: 28px; flex-wrap: wrap; padding: 14px 0; font-size: 13px; }
.inv-foot { margin-top: 22px; display: flex; justify-content: space-between; gap: 20px; font-size: 12.5px; color: var(--text-2); }

.receipt {
    width: 302px; margin: 0 auto; background: #fff; padding: 12px 14px;
    font-family: "Menlo", "Consolas", monospace; font-size: 11.5px; line-height: 1.4; color: #000;
}
.receipt .c { text-align: center; }
.receipt hr { border: 0; border-top: 1px dashed #666; margin: 6px 0; }
.receipt table { width: 100%; border-collapse: collapse; font-size: 11px; }
.receipt td { padding: 1px 0; vertical-align: top; }

/* ================================================================== charts */

.bars { display: flex; align-items: flex-end; gap: 8px; height: 170px; padding-top: 10px; }
.bars .bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.bars .bar {
    width: 100%; max-width: 42px; border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, var(--ocean-400), var(--ocean-600)); min-height: 3px;
    transition: height .4s ease;
}
.bars .bar-lbl { font-size: 10.5px; color: var(--text-2); }
.bars .bar-val { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.progress { height: 7px; background: #e6ecf3; border-radius: var(--r-pill); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--ocean-500); border-radius: var(--r-pill); }

/* ================================================================ tab bar */

.tabbar { display: none; }

/* ============================================================== responsive */

@media (max-width: 1080px) {
    .pos-wrap { grid-template-columns: 1fr; }
    .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .sidebar {
        position: fixed; z-index: 120; left: 0; top: 0; bottom: 0;
        transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-lg);
    }
    body.nav-open .sidebar { transform: none; }
    body.nav-open::after {
        content: ''; position: fixed; inset: 0; background: rgba(6, 39, 67, .4); z-index: 110;
    }
    .menu-btn { display: inline-flex; }
    .content { padding: 16px 14px 90px; }
    .topbar { padding: 10px 14px; }
    .topbar h1 { font-size: 18px; }
    .g2, .g3, .g4 { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }

    .tabbar {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
        background: rgba(255, 255, 255, .92); backdrop-filter: blur(18px) saturate(180%);
        border-top: 1px solid var(--line); padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
    }
    .tabbar a {
        flex: 1; text-align: center; font-size: 10.5px; color: var(--text-2); font-weight: 600;
        display: grid; gap: 2px; padding: 2px 0;
    }
    .tabbar a .ico { font-size: 19px; }
    .tabbar a.active { color: var(--ocean-600); }
}

/* ================================================================== print */

@media print {
    .sidebar, .topbar, .tabbar, .no-print { display: none !important; }
    body { background: #fff; }
    .content { padding: 0; }
    .inv-sheet { box-shadow: none; border: 0; border-radius: 0; max-width: none; padding: 0; }
    .shell { display: block; }
}

/* ============================================================ preloader */

.preloader {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #071526 0%, #0d3551 55%, #087b91 100%);
    transition: opacity .45s ease, visibility .45s ease;
}
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader-brand {
    width: 68px; height: 68px; border-radius: 18px; display: grid; place-items: center;
    font-size: 32px; color: #fff;
    background: linear-gradient(160deg, var(--ocean-500), var(--ocean-700));
    box-shadow: 0 14px 36px rgba(8, 126, 164, .45);
    animation: preloader-pulse 1.6s ease-in-out infinite;
}

.preloader-text {
    margin-top: 18px; color: rgba(255,255,255,.92); font-size: 20px; font-weight: 680;
    letter-spacing: -.03em; font-family: var(--font);
}

.preloader-sub {
    margin-top: 5px; color: rgba(255,255,255,.5); font-size: 12px; font-weight: 500;
    letter-spacing: .04em; font-family: var(--font);
}

.preloader-dots {
    display: flex; gap: 8px; margin-top: 28px;
}
.preloader-dots span {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,.35);
    animation: preloader-bounce .9s ease-in-out infinite;
}
.preloader-dots span:nth-child(2) { animation-delay: .15s; }
.preloader-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes preloader-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 14px 36px rgba(8, 126, 164, .45); }
    50% { transform: scale(1.06); box-shadow: 0 18px 44px rgba(8, 126, 164, .6); }
}
@keyframes preloader-bounce {
    0%, 80%, 100% { transform: scale(.6); background: rgba(255,255,255,.25); }
    40% { transform: scale(1.1); background: rgba(255,255,255,.9); }
}

@media print { .preloader { display: none !important; } }

/* ============================================================ app credit */

.app-credit {
    margin: 28px 0 4px;
    text-align: center;
    font-size: 11.5px;
    color: var(--text-3);
    letter-spacing: .01em;
}
.app-credit b { color: var(--ocean-600); font-weight: 650; }

/* ============================================================ visual refresh */
:root {
    --ocean-950: #071526;
    --ocean-900: #0b2038;
    --ocean-800: #123554;
    --ocean-700: #155b86;
    --ocean-600: #087ea4;
    --ocean-500: #11a0b8;
    --ocean-400: #58c6d0;
    --bg: #f4f7fa;
    --surface-2: #f8fafc;
    --line: #dbe5ec;
    --r-sm: 8px;
    --r: 12px;
    --r-lg: 16px;
    --shadow: 0 8px 24px rgba(7, 21, 38, .08);
    --shadow-lg: 0 24px 60px rgba(7, 21, 38, .24);
}

.auth-body {
    padding: 28px;
    background: radial-gradient(circle at 15% 10%, #174d70 0, transparent 38%),
        linear-gradient(135deg, #071526 0%, #0d3551 55%, #087b91 100%);
}
.auth-card {
    max-width: 500px;
    padding: 42px 44px 30px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 18px;
    text-align: left;
}
.auth-logo { margin: 0 0 22px; width: 54px; height: 54px; border-radius: 14px; font-size: 25px; }
.auth-card h1 { font-size: 30px; letter-spacing: -.04em; }
.auth-card > p { margin: 8px 0 30px; font-size: 15px; }
.auth-card form { text-align: left; }
.auth-card .btn.block { margin-top: 18px; border-radius: 9px; padding: 13px 18px; }
.auth-card input[type=text], .auth-card input[type=password] { background: #fff; padding: 13px 14px; border-radius: 9px; }
.auth-card .field > label { font-size: 13px; color: #526c80; }
.sidebar { background: #0b2038; }
.nav-item { border-radius: 8px; }
.topbar { background: rgba(244,247,250,.92); }
.btn { border-radius: 9px; }
.btn-primary { border-radius: 9px; }

@media (max-width: 560px) {
    .auth-body { padding: 14px; }
    .auth-card { padding: 30px 22px 24px; }
    .auth-card h1 { font-size: 25px; }
}