/* ============================================================
   RPL Brand CSS — AFL v10 FINAL MASTER
   File: rpl_app.css
   Updated: 09-12-2025 IST (India)
   ============================================================ */

/* ============================================================
   SECTION 0 — GLOBAL Z-LAYER DEFINITIONS (RPL STANDARD v1.0)
   ============================================================ */

:root{
    --rpl-z-base: 1;
    --rpl-z-header: 1100;
    --rpl-z-sidebar: 2000;
    --rpl-z-sidebar-toggle: 2100;
    --rpl-z-dropdown: 3000;
    --rpl-z-dropdown-menu: 3100;
    --rpl-z-tooltip: 4000;
    --rpl-z-modal: 5000;
    --rpl-z-toast: 6000;
    --rpl-z-overlay: 9000;
}

/* ----------------------------------------------------------
   1) GLOBAL RESET
   ----------------------------------------------------------*/
*, *::before, *::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

/* ----------------------------------------------------------
   2) BRAND BASE COLORS (Root Tokens)
   ----------------------------------------------------------*/
:root{
  --rpl-white:#ffffff;
  --rpl-black:#000000;
  --rpl-green:#00df38;
  --rpl-sky:#007ffc;
  --rpl-blue:#0000ff;
  --rpl-yellow:#ffff00;
  --rpl-red:#ff0000;
  --rpl-purple:#bf00ff;
  --rpl-orange:#ff8000;
  --rpl-pink:#ff0080;

  --rpl-primary:var(--rpl-blue);
  --rpl-accent:var(--rpl-green);

  --rpl-body-bg:linear-gradient(180deg,#f6f9ff,#eef7ff);
  --rpl-surface:#ffffff;
  --rpl-surface-soft:#f9fafb;

  --rpl-text-main:#111827;
  --rpl-text-muted:#6b7280;

  --rpl-border-subtle:rgba(148,163,184,0.24);
  --rpl-border-soft:#e5e7eb;

  --rpl-header-bg:#ffffff;
  --rpl-footer-bg:#020617;
  --rpl-footer-text:#9ca3af;

  --rpl-input-bg:#ffffff;
  --rpl-input-border:#d1d5db;
  --rpl-input-focus-ring:rgba(37,99,235,0.25);

  --rpl-card-shadow:0 10px 30px rgba(15,23,42,0.12);
  --rpl-auth-shadow:0 22px 55px rgba(15,23,42,0.16);

  --rpl-mobile-link-bg:#f9fafb;
  --rpl-mobile-link-border:#e5e7eb;
  --rpl-mobile-link-hover-bg:var(--rpl-sky);
  --rpl-mobile-link-hover-text:#ffffff;
}

/* ----------------------------------------------------------
   3) AUTO DARK THEME
   ----------------------------------------------------------*/
@media (prefers-color-scheme: dark){
  :root{
    --rpl-body-bg:radial-gradient(circle at top,#020617 0,#020617 55%);
    --rpl-surface:#020617;
    --rpl-surface-soft:#020617;

    --rpl-text-main:#e5e7eb;
    --rpl-text-muted:#9ca3af;

    --rpl-border-subtle:rgba(148,163,184,0.50);
    --rpl-border-soft:#1f2937;

    --rpl-header-bg:#020617;
    --rpl-footer-bg:#000000;
    --rpl-footer-text:#6b7280;

    --rpl-input-bg:#020617;
    --rpl-input-border:#4b5563;
    --rpl-input-focus-ring:rgba(56,189,248,0.45);

    --rpl-card-shadow:0 22px 55px rgba(0,0,0,0.75);
    --rpl-auth-shadow:0 26px 70px rgba(0,0,0,0.85);

    --rpl-mobile-link-bg:#020617;
    --rpl-mobile-link-border:#374151;
    --rpl-mobile-link-hover-bg:#111827;
    --rpl-mobile-link-hover-text:#f9fafb;
  }
}

/* ----------------------------------------------------------
   4) MANUAL THEME OVERRIDE
   ----------------------------------------------------------*/
html[data-theme="light"]{
  --rpl-body-bg:linear-gradient(180deg,#f6f9ff,#eef7ff);
  --rpl-surface:#ffffff;
  --rpl-surface-soft:#f9fafb;

  --rpl-text-main:#111827;
  --rpl-text-muted:#6b7280;

  --rpl-border-subtle:rgba(148,163,184,0.24);
  --rpl-border-soft:#e5e7eb;

  --rpl-header-bg:#ffffff;
  --rpl-footer-bg:#020617;
  --rpl-footer-text:#9ca3af;

  --rpl-input-bg:#ffffff;
  --rpl-input-border:#d1d5db;
  --rpl-input-focus-ring:rgba(37,99,235,0.25);

  --rpl-card-shadow:0 10px 30px rgba(15,23,42,0.12);
  --rpl-auth-shadow:0 22px 55px rgba(15,23,42,0.16);

  --rpl-mobile-link-bg:#f9fafb;
  --rpl-mobile-link-border:#e5e7eb;
  --rpl-mobile-link-hover-bg:var(--rpl-sky);
  --rpl-mobile-link-hover-text:#ffffff;
}

html[data-theme="dark"]{
  --rpl-body-bg:radial-gradient(circle at top,#020617 0,#020617 55%);
  --rpl-surface:#020617;
  --rpl-surface-soft:#020617;

  --rpl-text-main:#e5e7eb;
  --rpl-text-muted:#9ca3af;

  --rpl-border-subtle:rgba(148,163,184,0.50);
  --rpl-border-soft:#1f2937;

  --rpl-header-bg:#020617;
  --rpl-footer-bg:#000000;
  --rpl-footer-text:#6b7280;

  --rpl-input-bg:#020617;
  --rpl-input-border:#4b5563;
  --rpl-input-focus-ring:rgba(56,189,248,0.45);

  --rpl-card-shadow:0 22px 55px rgba(0,0,0,0.75);
  --rpl-auth-shadow:0 26px 70px rgba(0,0,0,0.85);

  --rpl-mobile-link-bg:#020617;
  --rpl-mobile-link-border:#374151;
  --rpl-mobile-link-hover-bg:#111827;
  --rpl-mobile-link-hover-text:#f9fafb;
}

/* ----------------------------------------------------------
   5) BASE BODY + ROOT LAYOUT
   ----------------------------------------------------------*/
body.rpl-site{
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    color:var(--rpl-text-main);
    background:var(--rpl-body-bg);
    width:100%;
    max-width:100%;
    min-height:100vh;
    overflow-x:hidden;
}

.rpl-main{
    width:100% !important;
    min-height:100vh !important;
    display:flex;
    flex-direction:column;
}

/* ----------------------------------------------------------
   6) BASE CONTAINERS — AFL SAFE
   ----------------------------------------------------------*/

.rpl-container{
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:column;
}

.rpl-container-margin{
    margin-top: clamp(0px, 2vw, 60px);
    margin-bottom: clamp(0px, 2vw, 60px);
}

.rpl-container-padding{
    padding: clamp(8px, 3vw, 24px);
}

/* Background helpers */
.rpl-container-bg-white{ background:var(--rpl-white); }
.rpl-container-bg-gray{ background:#f8f9fa; }
.rpl-container-bg-light{ background:#f3f4f6; }

.rpl-content{
    flex:1;
    width:100%;
    min-height:0;
}

/* Alias for legacy Bootstrap-based content container */
.container,
#rplContent,
.rpl-header-inner{
    max-width:100%;
}

/* Page fade-in animation */
#rplContent{
    opacity:0;
    transform:translateY(6px);
    transition:opacity .4s ease, transform .4s ease;
}
body.rpl-page-loaded #rplContent{
    opacity:1;
    transform:translateY(0);
}

/* ----------------------------------------------------------
   7) AFL CORE SYSTEM (GLOBAL FLUID LAYOUT)
   ----------------------------------------------------------*/

/* AFL Fluid Row */
.rpl-afl-row{
    width:100%;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:auto;
}

/* Flex 1 Unit */
.rpl-flex{
    flex:1;
    min-width:0;
}

/* Fixed Auto Unit */
.rpl-fixed{
    flex:0 0 auto;
}

/* Height-balanced AFL Unit */
.rpl-unit{
    height:auto;
    line-height:normal;
    display:flex;
    align-items:center;
}

/* ----------------------------------------------------------
   8) TYPOGRAPHY (RPL SCALE)
   ----------------------------------------------------------*/

.rpl-text-xs{ font-size:11px; }
.rpl-text-sm{ font-size:13px; }
.rpl-text-base{ font-size:14px; }
.rpl-text-md{ font-size:15px; }
.rpl-text-lg{ font-size:17px; }
.rpl-text-xl{ font-size:20px; }

/* Keyboard-visible focus */
.keyboard-nav :focus{
    outline:3px solid var(--rpl-accent);
    outline-offset:2px;
}

/* ----------------------------------------------------------
   9) HEADER + NAV + SEARCH (AFL HEADER v3)
   ----------------------------------------------------------*/

.rpl-header{
    flex:0 0 auto;
    width:100%;
    position:sticky;
    top:0;
    z-index:var(--rpl-z-header);
    background:var(--rpl-header-bg);
    border-bottom:1px solid var(--rpl-border-subtle);
    backdrop-filter:blur(10px);
    margin:0 !important;
    padding-top:0 !important;
}

.rpl-header-inner{
    display:flex;
    align-items:center;
    gap:auto;
}

.rpl-header-logo{
    width:90px;
    height:90px;
    padding:clamp(0px, 1vw, 3px);
    border-radius:50%;
    object-fit:cover;
}

.rpl-header-text{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.rpl-header-title{
    font-size:clamp(13px, 1.1vw, 16px);
    font-weight:700;
}

.rpl-header-sub{
    font-size:11px;
    color:var(--rpl-text-muted);
}

/* Desktop / Tablet Nav */
.rpl-header-nav{
    padding: clamp(5px,1vw,10px);
    margin-right: (5px,1vw,10px);
    display:none;
    align-items:center;
    gap:clamp(5px,1vw,10px);
    font-size:20px;
}

.rpl-header-nav a{
    text-decoration:none;
    color:var(--rpl-text-main);
}
.rpl-header-nav a:hover{
    color:var(--rpl-primary);
}

/* Smart Search Bar */
.rpl-header-search{
    padding:clamp(5px, 1vw, 10px);
    display:flex;
    align-items:center;
    flex:1;
}

.rpl-header-search input{
    width:100%;
    text-align:center;
    padding:clamp(2px, 1vw, 5px);
    border-radius:999px;
    border:1px solid var(--rpl-input-border);
    background:var(--rpl-input-bg);
    font-size:13px;
    min-width:0;
    color:var(--rpl-text-main);
}

.rpl-header-search input::placeholder{
    color:var(--rpl-text-muted);
}

.rpl-header-search input:focus{
    border-color:var(--rpl-primary);
    box-shadow:0 0 0 1px var(--rpl-input-focus-ring);
    outline:none;
}

/* Hide <button> even if HTML has it */
.rpl-header-search button{
    display:none !important;
}

/* ----------------------------------------------------------
   10) FOOTER (RPL FOOTER SYSTEM v3)
   ----------------------------------------------------------*/

.rpl-footer{
    flex:0 0 auto;
    width:100%;
    background:var(--rpl-footer-bg);
    color:var(--rpl-footer-text);
    font-size:15px;
    text-align:center;
}

.rpl-footer-full{
    margin:0 !important;
}

/* Auto grid 1 → 6 columns */
.rpl-footer-top-grid{
    width:100%;
    display:grid;
    gap: clamp(5px, 1vw, 10px);
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    padding: clamp(14px, 2vw, 24px);
}

.rpl-footer-col{
    display:flex;
    flex-direction:column;
    text-align:center;
}

.rpl-footer-col h4{
    font-size:15px;
    font-weight:600;
    margin-bottom:4px;
    color:#e5e7eb;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.rpl-footer-col a{
    font-size:15px;
    text-decoration:none;
    color:var(--rpl-footer-text);
}
.rpl-footer-col a:hover{
    color:var(--rpl-white);
}

.rpl-footer-bottom-row{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left:clamp(14px, 2vw, 24px);
    padding-right: clamp(14px, 2vw, 24px);
    flex-wrap:wrap;
    font-size:15px;
}

.rpl-footer-bottom-left{
    display:flex;
    gap:clamp(5px, 1vw, 10px);
    margin: clamp(0px, 1vw, 5px);
    flex-wrap:wrap;
    align-items:center;
}

.rpl-footer-bottom-left img{
    width:42px;
    height:26px;
    object-fit:contain;
    background:white;
    border-radius:4px;
}

.rpl-footer-bottom-center{
    text-align:center;
    flex:1;
    margin: clamp(0px, 1vw, 5px);
    font-size:15px;
    color:#e5e5e5;
    white-space:nowrap;
}

.rpl-footer-bottom-right{
    display:flex;
    margin: clamp(0px, 1vw, 5px);
    gap:clamp(5px, 1vw, 10px);
    flex-wrap:wrap;
}

.rpl-footer-bottom-right a{
    color:#e5e5e5;
    font-size:15px;
    text-decoration:none;
}
.rpl-footer-bottom-right a:hover{
    color:var(--rpl-white);
}

.rpl-footer-divider{
    width:100%;
    height:1px;
    background:rgba(255,255,255,0.18);
    margin-top:auto;
}

/* ----------------------------------------------------------
   11) HERO SYSTEM (AFL HERO v2)
   ----------------------------------------------------------*/

.rpl-hero-fluid{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:auto;
    background:linear-gradient(135deg, var(--rpl-blue), var(--rpl-sky));
    color:var(--rpl-white);
    border-radius:clamp(8px, 2vw, 18px);
}

.rpl-hero-inner{
    max-width:100%;
    text-align:center;
}

.rpl-hero-title{
    font-size:clamp(20px, 4vw, 36px);
    font-weight:700;
    margin-bottom:clamp(8px, 2vw, 16px);
}

.rpl-hero-desc{
    font-size:clamp(13px, 2.2vw, 18px);
    opacity:0.92;
}

/* Legacy hero */
.rpl-hero{
    background:linear-gradient(90deg,var(--rpl-primary),var(--rpl-sky));
    color:var(--rpl-white);
}

/* ----------------------------------------------------------
   12) SECTION + GRID SYSTEM (AFL GRID v2)
   ----------------------------------------------------------*/

.rpl-section{
    width:100%;
    padding:auto;
    display:flex;
    flex-direction:column;
    gap:auto;
}

.rpl-section--white{ background:var(--rpl-white); }
.rpl-section--gray{ background:#f8f9fa; }
.rpl-section--light{ background:#f3f4f6; }

.rpl-section--border{
    border-top:1px solid var(--rpl-border-soft);
    border-bottom:1px solid var(--rpl-border-soft);
}

.rpl-section--full{
    width:100%;
}

.rpl-section-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
}

.rpl-section-header-text{
    display:flex;
    gap:auto;
    align-items:flex-start;
}

.rpl-section-icon{
    font-size:36px;
}

.rpl-section-badge{
    display:inline-block;
    padding:auto;
    background:var(--rpl-orange);
    color:var(--rpl-white);
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.rpl-section-title{
    font-size:clamp(22px, 3vw, 34px);
    font-weight:800;
}

.rpl-section-subtitle{
    font-size:clamp(14px, 2vw, 18px);
    color:#4b5563;
}

.rpl-section-desc{
    font-size:clamp(13px, 2vw, 16px);
    color:#374151;
}

.rpl-section-body{
    display:flex;
    flex-direction:column;
    gap:auto;
}

/* AUTO-GRID (Responsive Fill) */
.rpl-section-body-grid{
    display:grid;
    gap:auto;
    grid-template-columns:repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

/* Legacy flex grid */
.rpl-grid{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:clamp(5px, 1vw, 10px);
}

.rpl-grid .rpl-card{
    flex:1;
    min-width:clamp(140px, 30%, 260px);
}

/* ----------------------------------------------------------
   13) BUTTON SYSTEM (RPL BUTTON v3)
   ----------------------------------------------------------*/

.rpl-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:auto;
    padding:auto;
    font-size:clamp(14px, 2vw, 17px);
    font-weight:600;
    cursor:pointer;
    border:none;
    text-decoration:none;
    transition:all 0.22s ease;
    border-radius:12px;
    line-height:1.2;
    background:linear-gradient(135deg,var(--rpl-primary),var(--rpl-sky));
    color:var(--rpl-white);
}

/* Shapes */
.rpl-btn-rounded{ border-radius:999px !important; }

/* Sizes */
.rpl-btn-size-small{ font-size:13px; }
.rpl-btn-size-large{ font-size:18px; }

/* Full width */
.rpl-btn-full{ width:100%; }

/* Semantic Types */
.rpl-btn-primary{
    background:var(--rpl-primary);
    color:var(--rpl-white);
}
.rpl-btn-primary:hover{ filter:brightness(1.05); }

.rpl-btn-secondary{
    background:var(--rpl-surface);
    color:var(--rpl-primary);
    border:1px solid var(--rpl-primary);
}

.rpl-btn-outline{
    background:transparent;
    color:var(--rpl-text-main);
    border:1px solid var(--rpl-input-border);
}

.rpl-btn-success{
    background:var(--rpl-green);
    color:#000;
}

.rpl-btn-warning{
    background:var(--rpl-yellow);
    color:#000;
}

.rpl-btn-danger{
    background:#ff2f2f;
    color:#fff;
}

.rpl-btn-dark{
    background:#000;
    color:#fff;
}

.rpl-btn-light{
    background:#f3f4f6;
    color:#111827;
}

/* Disabled */
.rpl-btn-disabled,
.rpl-btn-loading{
    opacity:0.6;
    cursor:not-allowed;
    pointer-events:none;
}

/* Icon buttons */
.rpl-btn-icon-left,
.rpl-btn-icon-right{
    display:flex;
    align-items:center;
    font-size:18px;
}

/* ----------------------------------------------------------
   14) FORM SYSTEM (MASTER INPUT v2)
   ----------------------------------------------------------*/

.rpl-form{
    display:flex;
    flex-direction:column;
    gap:auto;
    border-radius:18px;
}

.rpl-form-padding{ padding:auto; }
.rpl-form-border{ border:1px solid var(--rpl-border-soft); }

.rpl-form-bg-gray{ background:#f3f4f6; }
.rpl-form-bg-light{ background:#fafafa; }

.rpl-input-group{
    display:flex;
    flex-direction:column;
    gap:auto;
}

.rpl-input-label{
    font-size:14px;
    font-weight:600;
    color:var(--rpl-text-main);
}

.rpl-input-wrap{
    position:relative;
    display:flex;
    align-items:center;
}

.rpl-input-icon{
    position:absolute;
    left:12px;
    font-size:18px;
    opacity:0.6;
}

/* Base Input */
.rpl-input{
    width:100%;
    padding:auto;
    border-radius:10px;
    border:1px solid var(--rpl-input-border);
    background:var(--rpl-input-bg);
    font-size:14px;
    color:var(--rpl-text-main);
}

/* Icon + Input */
.rpl-input-wrap .rpl-input{
    padding-left:auto;
}

.rpl-input:focus{
    border-color:var(--rpl-primary);
    box-shadow:0 0 0 1px var(--rpl-input-focus-ring);
    outline:none;
}

/* Textarea */
.rpl-textarea{
    width:100%;
    padding:auto;
    border:1px solid var(--rpl-input-border);
    border-radius:10px;
    resize:vertical;
    font-size:15px;
    background:var(--rpl-input-bg);
    color:var(--rpl-text-main);
}

/* Error */
.rpl-input-error{
    font-size:12px;
    color:#ff2f2f;
}

/* ----------------------------------------------------------
   15) AUTH SYSTEM (LOGIN/REGISTER LAYOUT)
   ----------------------------------------------------------*/

.rpl-auth-layout{
    min-height:calc(100vh - 150px);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:auto;
    background:
      radial-gradient(circle at top left, rgba(0,127,252,0.12), transparent 55%),
      radial-gradient(circle at bottom right, rgba(0,223,56,0.12), transparent 55%);
}

.rpl-auth-card{
    width:100%;
    max-width:440px;
    background:var(--rpl-surface);
    border-radius:20px;
    padding:auto;
    border:1px solid var(--rpl-border-subtle);
    box-shadow:var(--rpl-auth-shadow);
    backdrop-filter:blur(14px);
}

.rpl-auth-badge{
    display:flex;
    align-items:center;
    gap:12px;
}

.rpl-auth-logo{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 4px 12px rgba(0,0,0,0.22);
}

.rpl-auth-brand{
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    color:var(--rpl-primary);
}

.rpl-auth-tagline{
    font-size:12px;
    color:var(--rpl-text-muted);
}

.rpl-auth-title{
    font-size:20px;
}

.rpl-auth-sub{
    font-size:13px;
    color:var(--rpl-text-muted);
}

.rpl-form-box{
    display:flex;
    flex-direction:column;
    gap:auto;
}

.rpl-auth-meta{
    font-size:12px;
    text-align:center;
    color:var(--rpl-text-muted);
}
.rpl-auth-meta a{ color:var(--rpl-primary); }

/* ----------------------------------------------------------
   16) DASHBOARD + CARD SYSTEM (MASTER v4)
   ----------------------------------------------------------*/

.rpl-dashboard-layout{
    min-height:calc(100vh - 150px);
    padding:auto;
}

.rpl-dashboard-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:auto;
    margin-top:auto;
}

/* CARD BASE */
.rpl-card{
    background:var(--rpl-surface);
    border-radius:clamp(10px, 2vw, 16px);
    padding:auto;
    border:1px solid var(--rpl-border-subtle);
    box-shadow:var(--rpl-card-shadow);
    display:flex;
    flex-direction:column;
    gap:auto;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

/* Backward compatible */
.rpl-card-service{ border-radius:12px; }
.rpl-good-card{ border-radius:10px; }

.rpl-card--border{
    border:1px solid var(--rpl-border-soft);
}

.rpl-card--clickable{
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}
.rpl-card--clickable:hover{
    box-shadow:0 6px 20px rgba(0,0,0,0.10);
    transform:translateY(-2px);
    border-color:#d1d5db;
}

/* INNER LAYOUT */
.rpl-card-layout{
    display:flex;
    gap:auto;
}

/* IMAGE / MEDIA */
.rpl-card-media{
    flex:0 0 clamp(80px, 25vw, 140px);
    position:relative;
}

.rpl-card-img{
    width:100%;
    height:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:clamp(8px, 2vw, 14px);
}

/* BADGE ON MEDIA */
.rpl-card-badge{
    position:absolute;
    top:8px;
    left:8px;
    padding:auto;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    background:var(--rpl-orange);
    color:var(--rpl-white);
}

/* MAIN COLUMN */
.rpl-card-main{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:auto;
}

/* Small header row */
.rpl-card-topline{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:auto;
}

/* Tag */
.rpl-card-tag{
    padding:auto;
    font-size:11px;
    border-radius:999px;
    background:#f3f4f6;
    color:#374151;
    font-weight:600;
}

/* Status Chips */
.rpl-card-status{
    padding:auto;
    font-size:11px;
    border-radius:999px;
    font-weight:600;
}
.rpl-card-status--default{
    background:#f3f4f6;
    color:#374151;
}
.rpl-card-status--success{
    background:#dcfce7;
    color:#166534;
}
.rpl-card-status--warning{
    background:#fef9c3;
    color:#854d0e;
}
.rpl-card-status--danger{
    background:#fee2e2;
    color:#991b1b;
}

/* TITLE + TEXT */
.rpl-card-title{
    padding-left: clamp(2px, 1vw, 5px);
    font-size:clamp(18px, 2.4vw, 24px);
    font-weight:700;
}
.rpl-card-subtitle{
    padding-left: clamp(2px, 1vw, 5px);
    font-size:clamp(13px, 2vw, 16px);
    color:#4b5563;
}
.rpl-card-desc{
    padding-left: clamp(2px, 1vw, 5px);
    font-size:clamp(13px, 2vw, 16px);
}

/* Extra Slot */
.rpl-card-extra{
    margin-top:auto;
    font-size:clamp(13px, 2vw, 16px);
    color:#374151;
}

/* Price + Rating Row */
.rpl-card-info-row{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
}

.rpl-card-price-wrap{
    display:flex;
    align-items:baseline;
    gap:auto;
}

.rpl-card-price{
    padding-left: clamp(2px, 1vw, 5px);
    font-size:clamp(18px, 2.6vw, 24px);
    font-weight:700;
    color:var(--rpl-primary);
}

.rpl-card-old-price{
    font-size:clamp(12px, 1.8vw, 14px);
    color:#9ca3af;
    text-decoration:line-through;
}

.rpl-card-price-suffix{
    font-size:clamp(11px, 1.8vw, 13px);
    color:#4b5563;
}

/* Rating */
.rpl-card-rating{
    display:flex;
    align-items:center;
    gap:auto;
    font-size:13px;
}
.rpl-card-rating-value{ font-weight:700; }
.rpl-card-rating-star{
    font-size:13px;
    color:var(--rpl-green);
}
.rpl-card-rating-count{ color:#6b7280; }

/* Meta Row */
.rpl-card-meta-row{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    color:#6b7280;
}

/* Actions */
.rpl-card-actions{
    margin-top:auto;
    display:flex;
    flex-wrap:wrap;
    gap:auto;
}

/* ----------------------------------------------------------
   17) DROPDOWN SYSTEM (RPL DD v3 + Z-Layer)
   ----------------------------------------------------------*/

.rpl-dropdown{
    position:relative;
    display:inline-block;
    z-index:var(--rpl-z-dropdown);
}

.rpl-dropdown-btn{
    padding: 6px 10px;
    cursor: pointer;
    display:flex;
    align-items:center;
    gap:8px;
}

.rpl-dropdown-btn-icon{
    font-size:16px;
}

.rpl-dropdown-arrow{
    font-size:12px;
    margin-left:auto;
}

/* DROPDOWN MENU */
.rpl-dropdown-menu{
    position:absolute;
    top:100%;
    right:0;
    display:none;
    opacity: 0;
    transform: translateY(0px);
    padding-left: 10px !important;
    background:var(--rpl-surface);
    border-radius:10px;
    padding:auto;
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
    min-width:220px;
    transition: 0.40s ease-out;
    z-index:var(--rpl-z-dropdown-menu) !important;
}

/* alignment controls */
.rpl-dropdown-right{ right:0; left:auto; }
.rpl-dropdown-full{ width:100% !important; }

/* DROPDOWN ITEM */
.rpl-dropdown-item{
    display:flex;
    align-items:center;
    gap:auto;
    padding-left: 16px !important;
    font-size:14px;
    color:#111827;
    text-decoration:none;
    transition:0.15s ease;
}
.rpl-dropdown-item:hover{
    background:#f3f4f6;
}

.rpl-dropdown-item-icon{
    font-size:16px;
}

/* Danger style */
.rpl-dropdown-danger{
    color:#b91c1c;
}
.rpl-dropdown-danger:hover{
    background:#fee2e2;
}

/* OPEN STATE */
.rpl-dropdown.rpl-dd-open .rpl-dropdown-menu{
    display:block !important;
}

.rpl-dd-box {
    padding: 10px 0;
    border-radius: 12px;
    min-width: 220px;
}

.rpl-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -8px;   /* Button और Menu को connect करने के लिए */
    left: 0;
    width: 100%;
    height: 8px;
    background: transparent;
}

/* DESKTOP HOVER */
@media (hover: hover) {
    .rpl-dropdown:hover .rpl-dropdown-menu {
        display: block;
        opacity: 1;
        transform: translateY(0px);
    }
}

/* MOBILE CLICK */
@media (hover: none) {
    .rpl-dropdown.rpl-dd-open .rpl-dropdown-menu {
        display: block;
        opacity: 1;
        transform: translateY(0px);
    }
}



/* ----------------------------------------------------------
   18) ALERT + TOAST SYSTEM (AFL ALERT v2)
   ----------------------------------------------------------*/

/* ALERT */
.rpl-alert{
    width:100%;
    display:flex;
    align-items:flex-start;
    gap:auto;
    padding:auto;
    border-radius:12px;
    font-size:14px;
    position:relative;
    animation:rplAlertFade 0.3s ease;
}

.rpl-alert-full{ border-radius:0; }

/* Types */
.rpl-alert-success{ background:#dcfce7; color:#166534; }
.rpl-alert-warning{ background:#fef9c3; color:#854d0e; }
.rpl-alert-danger{  background:#fee2e2; color:#991b1b; }
.rpl-alert-info{    background:#dbeafe; color:#1e40af; }

.rpl-alert-icon{
    font-size:20px;
}

.rpl-alert-title{
    font-weight:700;
    font-size:15px;
}

.rpl-alert-message{
    margin-top:2px;
    font-size:14px;
}

/* Close Button */
.rpl-alert-close{
    position:absolute;
    top:8px;
    right:10px;
    background:none;
    border:none;
    font-size:20px;
    cursor:pointer;
    opacity:0.7;
}
.rpl-alert-close:hover{ opacity:1; }

/* Animation */
@keyframes rplAlertFade{
    from{ opacity:0; transform:translateY(-10px); }
    to{ opacity:1; transform:translateY(0); }
}

/* TOAST SYSTEM */
#rpl-toast-container{
    position:fixed;
    top:20px;
    right:20px;
    display:flex;
    flex-direction:column;
    gap:auto;
    z-index:var(--rpl-z-toast);
}

.rpl-toast{
    display:flex;
    align-items:flex-start;
    gap:auto;
    padding:auto;
    border-radius:12px;
    min-width:260px;
    max-width:340px;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
    animation:rplToastEnter 0.28s ease;
    color:#000;
    position:relative;
}

.rpl-toast-success{ background:#dcfce7; color:#166534; }
.rpl-toast-warning{ background:#fef9c3; color:#854d0e; }
.rpl-toast-danger{  background:#fee2e2; color:#991b1b; }
.rpl-toast-info{    background:#dbeafe; color:#1e40af; }

.rpl-toast-title{
    font-size:15px;
    font-weight:700;
}

.rpl-toast-message{
    font-size:14px;
    margin-top:3px;
}

.rpl-toast-close{
    position:absolute;
    top:6px;
    right:8px;
    border:none;
    background:none;
    font-size:20px;
    cursor:pointer;
    opacity:0.7;
}
.rpl-toast-close:hover{ opacity:1; }

@keyframes rplToastEnter{
    from{ opacity:0; transform:translateX(20px); }
    to{ opacity:1; transform:translateX(0); }
}
@keyframes rplToastExit{
    from{ opacity:1; }
    to{ opacity:0; transform:translateX(20px); }
}

/* ----------------------------------------------------------
   19) RPL SLIDER (AFL SLIDER v2)
   Updated: 09-Dec-2025 IST
   Notes: slider controls intentionally under dropdown layer
   ----------------------------------------------------------*/

.rpl-slider{
    position:relative;
    overflow:hidden;
    width:100%;
}

.rpl-slider-track{
    display:flex;
    gap:auto;
    transition:transform 0.35s ease;
}

.rpl-slider-item{
    flex:0 0 100%;
}

/* per-view responsive sizing */
@media (min-width:600px){
    .rpl-slider[data-perview="2"] .rpl-slider-item { flex:0 0 50%; }
}
@media (min-width:900px){
    .rpl-slider[data-perview="3"] .rpl-slider-item { flex:0 0 33.3333%; }
}
@media (min-width:1200px){
    .rpl-slider[data-perview="4"] .rpl-slider-item { flex:0 0 25%; }
}

/* Controls (kept below dropdown layer) */
.rpl-slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:var(--rpl-surface);
    border:none;
    width:38px;
    height:38px;
    border-radius:50%;
    box-shadow:0 2px 6px rgba(0,0,0,0.2);
    cursor:pointer;
    font-size:18px;
    z-index:900; /* BELOW header & dropdown */
}

.rpl-slider-btn.prev{ left:10px; }
.rpl-slider-btn.next{ right:10px; }

.rpl-slider-dots{
    display:flex;
    justify-content:center;
    gap:auto;
    margin-top:auto;
}

.rpl-slider-dot{
    width:10px;
    height:10px;
    background:#d1d5db;
    border-radius:50%;
    cursor:pointer;
}
.rpl-slider-dot.active{ background:var(--rpl-primary); }

/* ----------------------------------------------------------
   19.1) RPL SIDEBAR (AFL SIDEBAR v2)
   ----------------------------------------------------------*/

.rpl-sidebar{
    width:60px;
    background:var(--rpl-surface);
    height:100vh;
    border-right:1px solid var(--rpl-border-soft);
    transition:width 0.25s ease;
    position:fixed;
    top:0;
    left:0;
    z-index:var(--rpl-z-sidebar); /* 2000 */
    overflow-y:auto;
}

.rpl-sidebar.open{ width:220px; }

.rpl-sidebar-inner{
    padding:clamp(10px,2vw,16px);
    display:flex;
    flex-direction:column;
    gap:auto;
}

.rpl-sidebar-item{ width:100%; }

.rpl-sidebar-link{
    padding:clamp(8px,1.6vw,12px);
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:10px;
    text-decoration:none;
    color:var(--rpl-text-main);
    transition:background 0.25s ease;
}
.rpl-sidebar-link:hover{ background:var(--rpl-surface-soft); }

.rpl-sidebar-icon{ width:22px; height:22px; object-fit:contain; }

.rpl-sidebar-text{
    font-size:15px;
    font-weight:500;
    opacity:0;
    transition:opacity 0.25s ease;
}
.rpl-sidebar.open .rpl-sidebar-text{ opacity:1; }

.rpl-sidebar-badge{
    background:var(--rpl-purple);
    color:var(--rpl-white);
    padding:6px 10px;
    border-radius:20px;
    font-size:12px;
    margin-left:auto;
    white-space:nowrap;
    opacity:0;
    transition:opacity 0.25s ease;
}
.rpl-sidebar.open .rpl-sidebar-badge{ opacity:1; }

/* Sidebar Toggle Button (sits slightly above sidebar) */
.rpl-sidebar-toggle-btn{
    position:fixed;
    left:70px;
    top:14px;
    z-index:var(--rpl-z-sidebar-toggle); /* 2100 */
    background:var(--rpl-green);
    border:none;
    padding:8px 10px;
    border-radius:8px;
    color:var(--rpl-white);
    cursor:pointer;
}

/* ----------------------------------------------------------
   20) RPL POPUP / MODAL (AFL MODAL v2)
   ----------------------------------------------------------*/

.rpl-popup-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:var(--rpl-z-overlay); /* 9000 */
    animation:rplPopupFade 0.25s ease;
}

.rpl-popup-box{
    background:var(--rpl-surface);
    width:100%;
    max-width:880px;
    padding:clamp(16px,2.5vw,28px);
    border-radius:14px;
    position:relative;
    animation:rplPopupZoom 0.3s ease;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:0 22px 55px rgba(0,0,0,0.35);
}

/* Close */
.rpl-popup-close{
    position:absolute;
    top:8px;
    right:10px;
    font-size:28px;
    background:none;
    border:none;
    cursor:pointer;
    opacity:0.7;
}
.rpl-popup-close:hover{ opacity:1; }

@keyframes rplPopupFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes rplPopupZoom{ from{ transform:scale(0.95); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* ----------------------------------------------------------
   21) MOBILE MENU / NAV PANEL (AFL MOBILE v2)
   ----------------------------------------------------------*/

/* Mobile menu toggle button */
#rpl-mobile-menu-btn{
    padding: clamp(12px, 1.8vw,20px);
    margin-right: clamp(2px, 1vw,5px);
    margin-left: clamp(2px, 1vw,5px);
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--rpl-input-border);
    border-radius:6px;
    background:var(--rpl-green);
    color:var(--rpl-white);
    cursor:pointer;
    z-index:var(--rpl-z-header); /* ensure above mobile header */
}

/* Mobile nav panel */
#rpl-mobile-nav{
    display:none;
    flex-direction:column;
    gap:clamp(5px, 1vw, 10px);
    padding:clamp(10px,2vw,16px);
    background:var(--rpl-surface);
    border-bottom:1px solid var(--rpl-border-soft);
    position:relative;
    z-index:var(--rpl-z-header);
}

#rpl-mobile-nav a {
    display: block;
    padding: 10px 14px;
    border-radius: 6px;
    color: var(--rpl-text);
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}

/* HOVER COLOR (LIGHT THEME + DARK THEME AUTO MATCH) */
#rpl-mobile-nav a:hover {
    background: var(--rpl-hover, #f3f4f6);   /* Light hover */
    color: var(--rpl-primary, #007ffc);      /* Blue highlight */
}



/* Open state */
#rpl-mobile-nav.rpl-nav-open{ display:flex; }

#rpl-mobile-nav .rpl-header-search{ display:flex !important; width:100%; }

/* ----------------------------------------------------------
   22) RESPONSIVE BREAKPOINTS (AFL SAFE)
   ----------------------------------------------------------*/

/* Base mobile-first rules already set above */

/* ≥ 480px – Mobile Wide */
@media (min-width:480px){
    .rpl-dashboard-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ≥ 640px – Card stacking tweak */
@media (max-width:640px){
    .rpl-card-layout{ flex-direction:row; }
}

/* ≥ 768px – Tablet & Up */
@media (min-width:768px){
    .rpl-header-nav{ display:flex; }
    .rpl-header-search{ display:flex; margin-left:auto; }
    #rpl-mobile-menu-btn{ display:none !important; }
    #rpl-mobile-nav{ display:none !important; }
    .rpl-dashboard-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ≥ 1024px – Small Laptop */
@media (min-width:1024px){
    .rpl-dashboard-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ≥ 1440px – Desktop */
@media (min-width:1440px){
    .rpl-dashboard-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ≥ 1920px – Large Desktop / TV */
@media (min-width:1920px){
    .rpl-dashboard-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ----------------------------------------------------------
   23) FINAL SYSTEM FIXES & LEGACY GROUP
   - Minor compatibility fixes and legacy tokens grouped here
   ----------------------------------------------------------*/

/* Ensure header gap issues resolved */
#rplContent{ margin-top:0; }

/* Ensure dropdown remains inside header area (overflow hidden protection) */
.rpl-header{ overflow:visible; }

/* Legacy token compatibility (grouped, non-destructive) */
.rpl-card-service{ border-radius:12px; }
.rpl-good-card{ border-radius:10px; }

/* Small performance hint: avoid using 'auto' for padding where possible,
   but kept here for AFL token consistency and backwards compatibility. */
/* ============================================================
   RPL_APP.CSS — FINAL MASTER (PART 6 / 6)
   FINAL CODE for: resources/css/rpl_app.css
   Action: Replace entire file with the concatenation of PARTS 1..6
   Generated: 09-Dec-2025 IST (India)
   Notes:
     - AFL v10 safe
     - Z-Layer System v1.0 applied using CSS variables (--rpl-z-*)
     - Duplicate rules grouped into "LEGACY GROUP" (non-destructive)
     - Mobile-first, responsive breakpoints included
   ============================================================ */

/* ----------------------------------------------------------
   24) CLEANUP, UTILITIES & HELPERS
   ----------------------------------------------------------*/

/* Utility helpers */
.rpl-hidden { display:none !important; }
.rpl-visually-hidden {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Spacing helpers (AFL-friendly) */
.rpl-mt-xs{ margin-top:6px; }
.rpl-mt-sm{ margin-top:10px; }
.rpl-mt-md{ margin-top:16px; }
.rpl-mt-lg{ margin-top:24px; }

.rpl-px-0{ padding-left:0; padding-right:0; }
.rpl-p-0{ padding:0 !important; }

/* Image helpers */
.rpl-img-fluid{ max-width:100%; height:auto; display:block; }

/* Flex helpers */
.rpl-center{ display:flex; align-items:center; justify-content:center; }

/* ----------------------------------------------------------
   25) ACCESSIBILITY & FOCUS RINGS
   ----------------------------------------------------------*/

/* Visible focus outlines for keyboard users */
:focus{ outline:none; }
:focus-visible{
    outline:3px solid var(--rpl-accent);
    outline-offset:3px;
    border-radius:6px;
}

/* High contrast mode hint */
@media (prefers-contrast: more){
    .rpl-btn{ filter:contrast(1.15); }
}

/* ----------------------------------------------------------
   26) LEGACY ZONE (Non-destructive grouping of old tokens)
   - Keep here for backward compatibility. Do not delete.
   ----------------------------------------------------------*/

.rpl-legacy{
    /* Legacy helpers preserved for backward compatibility */
}

/* ----------------------------------------------------------
   27) CHANGELOG (Important)
   ----------------------------------------------------------
   09-Dec-2025 IST — FINAL MASTER
   - Reordered file to logical sections (Global → Layout → Components → Utilities)
   - Introduced CSS variables for z-layer system (--rpl-z-*)
   - Standardized z-index values across header/sidebar/dropdown/popup/toast
   - Consolidated duplicate tokens into root :root declarations
   - Kept legacy rules grouped (non-destructive)
   - AFL v10 responsiveness and grid rules applied
   - Added accessibility focus-visible rules
   - Minor naming and comment cleanup for maintainability
   ----------------------------------------------------------*/

/* ----------------------------------------------------------
   28) DEPLOYMENT & VERIFICATION CHECKLIST (Must follow)
   ----------------------------------------------------------
   1) Replace existing resources/css/app.css (or resources/css/rpl_app.css)
      with this FINAL file (full replace recommended).
   2) Clear any server-side CSS cache / CDN cache after upload.
   3) Verify in browsers:
        - Chrome (Win/Mac)
        - Edge (Win)
        - Firefox (Win/Mac)
        - Mobile Safari (iOS)
        - Android WebView (if used)
   4) Verify responsive breakpoints:
        - 320px (mobile)
        - 480px
        - 768px (tablet)
        - 1024px (laptop)
        - 1440px+
   5) Check stacking order:
        - Header (1100) above base content
        - Sidebar (2000) under dropdown (3000)
        - Dropdown menu (3100) above sidebar & header
        - Modal/Popup overlay (9000) top-most
        - Toasts (6000) above modals only if intended
   6) Run quick UI smoke tests:
        - Open header dropdown while sidebar expanded
        - Trigger modal & toast together
        - Open mobile nav and ensure header search visible
   7) If any 3rd-party library sets z-index inline, consider overriding
      with inline styles or stronger selectors only when necessary.
   ----------------------------------------------------------*/

/* ----------------------------------------------------------
   29) MAINTENANCE NOTES (RPL RuleSet v2.2 & 2.3 compliance)
   ----------------------------------------------------------
   - This file follows RPL RuleSet v2.2 (outer-layer edits only).
   - Do NOT modify laravel_core files; only place this file under
     the rpl_bridges/rpl_assets/ or resources/css/ as per project.
   - For future edits:
       * Follow the same section ordering.
       * When changing z-indexes, update :root z variables first.
       * Provide a FINAL CODE declaration in the commit message.
   ----------------------------------------------------------*/

/* ----------------------------------------------------------
   30) SIMPLE DEBUG SNIPPETS (Use in dev console temporarily)
   ----------------------------------------------------------*/
/* Show z-index visually (dev only) */
/*
document.querySelectorAll('*').forEach(el=>{
  const z = window.getComputedStyle(el).zIndex;
  if(z && z !== 'auto') el.style.outline = '1px dashed rgba(255,0,0,0.05)';
});
*/

/* ----------------------------------------------------------
   31) LICENSE & AUTHOR
   ----------------------------------------------------------
   RPL (RadhaPrem Legal Service) — RPL_APP.CSS FINAL MASTER
   Created: 09-Dec-2025 IST (India)
   Author: RadhaPrem Design System (prepared via ChatGPT)
   License: Internal — for RadhaPrem Legal Service & affiliates only.
            Redistribution or public reuse requires explicit permission.
   ----------------------------------------------------------*/

/* End of file — RPL_APP.CSS — FINAL MASTER (09-Dec-2025 IST) */