/* Minimal runtime CSS for preview cards & UI kit — mirrors the production
   Wattlink DS classes (source-ds/*.scss) so we can render components in HTML
   prototypes without compiling SCSS. Names and structure match 1:1. */

@import url("colors_and_type.css");

/* BUTTONS --------------------------------------------------------- */
.Button{display:inline-block;font-weight:600;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;border:1px solid transparent;padding:.75rem 1.5rem;font-size:1rem;border-radius:8px;transition:all .2s ease-in-out;font-family:inherit}
.Button:disabled,.Button.disabled{cursor:not-allowed;opacity:.65;transform:none;filter:none;box-shadow:none}
.Button--primary{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary);box-shadow:0 3px 6px rgba(var(--brand-primary-rgb),.3)}
.Button--primary:hover{background:hsl(33,90%,53%);transform:translateY(-1px);box-shadow:0 4px 8px rgba(var(--brand-primary-rgb),.4);color:#fff}
.Button--secondary{background:var(--brand-accent);color:#fff;border-color:var(--brand-accent);box-shadow:0 3px 6px rgba(var(--brand-accent-rgb),.3)}
.Button--secondary:hover{background:hsl(240,93%,24%);transform:translateY(-1px)}
.Button--success{background:var(--semantic-success);color:#fff;border-color:var(--semantic-success)}
.Button--danger{background:var(--semantic-danger);color:#fff;border-color:var(--semantic-danger)}
.Button--warning{background:var(--semantic-warning);color:#fff;border-color:var(--semantic-warning)}
.Button--info{background:var(--semantic-info);color:#fff;border-color:var(--semantic-info)}
.Button--cancel{background:transparent;color:var(--light-gray);border-color:var(--light-gray)}
.Button--cancel:hover{color:var(--dark-blue);background:var(--light-gray)}
.Button--link{background:transparent;border-color:transparent;color:var(--brand-primary);padding:.375rem .75rem;box-shadow:none;font-weight:500}
.Button--link:hover{color:hsl(33,90%,53%);background:transparent}
.Button--outlined{background:transparent;box-shadow:none}
.Button--outlined.Button--primary{color:var(--brand-primary);border-color:var(--brand-primary);background:transparent}
.Button--outlined.Button--primary:hover{color:#fff;background:var(--brand-primary)}
.Button--outlined.Button--secondary{color:var(--brand-accent);border-color:var(--brand-accent);background:transparent}
.Button--outlined.Button--secondary:hover{color:#fff;background:var(--brand-accent)}
.Button--outlined.Button--danger{color:var(--semantic-danger);border-color:var(--semantic-danger);background:transparent}
.Button--small{padding:.25rem .75rem;font-size:.875rem}
.Button--large{padding:.5rem 2rem;font-size:1.25rem}
.Button--rounded{border-radius:50px}
.Button--icon-only{background:none;border:none;padding:.5rem 1rem;border-radius:50%;color:#fff;font-size:1.25rem;box-shadow:none}
.Button--icon-only:hover{background:var(--white-1);transform:translateY(-1px)}

/* BADGES ---------------------------------------------------------- */
.Badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:.25rem;font-size:var(--fs-xxs);font-weight:500;white-space:nowrap;line-height:1}
.Badge i{font-size:.75rem;opacity:.9}
.Badge--small{padding:.15rem .35rem;font-size:.65rem}
.Badge--large{padding:.35rem .65rem;font-size:var(--fs-xs)}
.Badge--pill{border-radius:50rem}
.Badge--success{background:var(--semantic-success);color:#fff}
.Badge--warning{background:var(--semantic-warning);color:#fff}
.Badge--info{background:var(--semantic-info);color:#fff}
.Badge--danger{background:var(--semantic-danger);color:#fff}
.Badge--primary{background:var(--brand-primary);color:#fff}
.Badge--secondary{background:var(--gray-secondary);color:#fff}
.Badge--production{background:var(--brand-primary);color:#fff}
.Badge--consumption{background:var(--brand-secondary);color:#fff}
.Badge--sharing{background:var(--brand-accent);color:#fff}
.Badge--neutral{background:transparent;color:var(--light-gray);border:1px solid var(--light-gray);opacity:.8}

/* ALERTS ---------------------------------------------------------- */
.Alert{padding:.75rem 1rem;border-radius:.5rem;margin-bottom:.75rem;border-left:4px solid transparent}
.Alert--success{background:rgba(var(--semantic-success-rgb),.15);color:#fff;border-left-color:var(--semantic-success)}
.Alert--warning{background:rgba(var(--semantic-warning-rgb),.15);color:#fff;border-left-color:var(--semantic-warning)}
.Alert--danger{background:rgba(var(--semantic-danger-rgb),.15);color:#fff;border-left-color:var(--semantic-danger)}
.Alert--info{background:rgba(var(--semantic-info-rgb),.2);color:#fff;border-left-color:var(--semantic-info)}
.Alert--primary{background:rgba(var(--brand-primary-rgb),.15);color:#fff;border-left-color:var(--brand-primary)}

/* CARDS ----------------------------------------------------------- */
.Card{background:var(--dark-bg-color);padding:1rem;border:2px solid var(--light-gray);border-radius:1rem;color:#fff}
.Card__title{font-size:1.5rem;font-weight:600;margin:0 0 1rem 0}
.Card__metric{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--white-05);border:1px solid var(--white-1);border-radius:.5rem}
.Card__metric-icon{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--white-1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.Card__metric-label{color:var(--light-gray);font-size:.75rem;font-weight:500;margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.025em}
.Card__metric-value{color:#fff;font-size:.9rem;font-weight:700;line-height:1}
.Card--accent-bg{background:var(--brand-accent);border-color:var(--brand-accent)}

/* STAT CARDS ------------------------------------------------------ */
.StatCard{display:flex;align-items:center;gap:1rem;padding:1.5rem;border-radius:.75rem;flex:1;background:var(--white-05);border:1px solid var(--white-1)}
.StatCard__icon{width:4rem;height:4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--white-1)}
.StatCard__icon i{font-size:1.75rem;color:#fff}
.StatCard__label{color:var(--light-gray);font-size:var(--fs-sm);font-weight:600;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.025em}
.StatCard__value{color:#fff;font-size:var(--fs-lg);font-weight:900;line-height:1.1}
.StatCard__unit{font-size:.45em;opacity:.8}
.StatCard--production{background:var(--chart-bg-production);border:2px solid var(--chart-border-production)}
.StatCard--production .StatCard__icon{background:var(--chart-border-production)}
.StatCard--consumption{background:var(--chart-bg-consumption);border:2px solid var(--chart-border-consumption)}
.StatCard--consumption .StatCard__icon{background:var(--chart-border-consumption)}
.StatCard--sharing{background:var(--chart-bg-sharing-production);border:2px solid var(--chart-border-sharing)}
.StatCard--sharing .StatCard__icon{background:var(--chart-border-sharing)}
.StatCardGrid{display:flex;gap:1rem;flex-wrap:wrap}

/* ICONS ----------------------------------------------------------- */
.Icon{display:inline-flex;align-items:center;justify-content:center;color:#fff}
.Icon--circular{border-radius:50%;flex-shrink:0}
.Icon--small{width:2rem;height:2rem} .Icon--small i{font-size:.9rem}
.Icon--medium{width:3rem;height:3rem} .Icon--medium i{font-size:1.5rem}
.Icon--large{width:4rem;height:4rem} .Icon--large i{font-size:2rem}
.Icon--xlarge{width:5rem;height:5rem} .Icon--xlarge i{font-size:2.5rem}
.Icon--production{background:var(--brand-primary)}
.Icon--consumption{background:var(--brand-secondary)}
.Icon--sharing{background:var(--brand-accent)}
.Icon--success{background:var(--semantic-success)}
.Icon--warning{background:var(--semantic-warning)}
.Icon--danger{background:var(--semantic-danger)}
.Icon--info{background:var(--semantic-info)}

/* FORMS ----------------------------------------------------------- */
.Form__title{color:#fff;font-size:var(--fs-md);font-weight:600;margin:1rem 0}
.Form__group{position:relative;margin-bottom:1rem}
.Form__label{color:#fff;font-weight:300;display:block;margin-bottom:.35rem;font-size:var(--fs-sm)}
.Form__label--required::after{content:" *";color:var(--brand-primary);font-weight:600;margin-left:.125rem}
.Form__input{width:100%;padding:1rem .75rem .75rem;border-radius:8px;background:var(--white-05);border:1px solid var(--white-15);color:#fff;font-size:.875rem;font-family:inherit;transition:all .2s ease-in-out}
.Form__input::placeholder{color:var(--light-gray);opacity:.6}
.Form__input:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 .2rem rgba(var(--brand-primary-rgb),.55)}
.Form__actions{display:flex;justify-content:space-between;margin-top:2rem;gap:.75rem}
.Form__granularity-buttons{display:inline-flex;background:var(--white-05);border:1px solid var(--white-15);border-radius:.5rem;padding:3px;gap:2px}
.Form__granularity-btn{padding:.5rem 1rem;color:var(--light-gray);border-radius:.375rem;cursor:pointer;font-size:var(--fs-xs);font-weight:500;transition:all .2s}
.Form__granularity-btn.active{background:var(--brand-primary);color:#fff}
.Form__role-buttons{display:inline-flex;background:var(--white-05);border:1px solid var(--white-15);border-radius:.5rem;padding:3px;gap:2px}
.Form__role-btn{padding:.5rem 1rem;background:transparent;border:0;color:var(--light-gray);border-radius:.375rem;cursor:pointer;font-size:var(--fs-xs);font-weight:500;font-family:inherit}
.Form__role-btn.active{background:var(--brand-primary);color:#fff}
.Form__checkbox-group{display:flex;flex-direction:column;gap:.4rem;color:#fff;font-size:var(--fs-sm)}
.Form__checkbox-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer}
.Form__filter-label{font-size:var(--fs-xxs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--light-gray)}

/* LISTINGS -------------------------------------------------------- */
.Listing{display:flex;flex-direction:column;gap:.75rem}
.Listing__item{background:hsl(240,78%,14%);border:1px solid var(--light-gray);border-radius:.5rem;transition:all .2s ease}
.Listing__item:hover{box-shadow:0 4px 12px var(--shadow-light);border-color:var(--brand-primary)}
.Listing__content{padding:1.25rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.Listing__main{display:flex;align-items:center;gap:.75rem;flex:1}
.Listing__status{width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;color:#fff;background:var(--brand-accent)}
.Listing__status--admin{background:var(--brand-accent);border:1px solid #fff}
.Listing__status--user{background:var(--brand-secondary)}
.Listing__status--supplier{background:var(--brand-primary)}
.Listing__status--customer{background:var(--brand-secondary)}
.Listing__status--combined{background:linear-gradient(135deg,var(--brand-primary) 0%,var(--brand-secondary) 100%)}
.Listing__info-primary{color:#fff;font-weight:500;font-size:var(--fs-md);line-height:1.2}
.Listing__info-secondary{color:var(--white-5);font-size:var(--fs-xs);line-height:1.2;margin-top:.125rem}
.Listing__actions{display:flex;gap:.5rem;align-items:center;flex-shrink:0}
.Listing__action{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:.25rem;text-decoration:none;font-size:var(--fs-xs);font-weight:500;border:1px solid transparent;white-space:nowrap}
.Listing__action--primary{background:var(--brand-primary);color:#fff}
.Listing__action--secondary{background:var(--brand-accent);color:#fff;border-color:var(--light-gray)}
.Listing__action--danger{background:transparent;color:var(--semantic-danger);border-color:var(--semantic-danger)}

/* TABS ------------------------------------------------------------ */
.Tabs{}
.Tabs .nav-tabs{display:flex;gap:0;border-bottom:1px solid var(--white-15);margin:0;padding:0;list-style:none}
.Tabs .nav-tabs .nav-link{padding:.75rem 1rem;color:var(--light-gray);text-decoration:none;border-bottom:2px solid transparent;cursor:pointer;font-size:var(--fs-sm);font-weight:500}
.Tabs .nav-tabs .nav-link.active{color:#fff;border-bottom-color:var(--brand-primary)}
.Tabs__content{padding:1rem 0}

/* NAV ------------------------------------------------------------- */
.Nav__list{display:flex;list-style:none;margin:0;padding:0;gap:.25rem}
.Nav__link{display:block;color:var(--light-gray);padding:.5rem 1rem;text-decoration:none;border-radius:.25rem;font-size:var(--fs-sm)}
.Nav__link:hover{color:var(--brand-primary)}
.Nav__link.active{background:var(--brand-primary);color:#fff}
.Nav--vertical .Nav__list{flex-direction:column;gap:.1rem}
.Nav--vertical .Nav__link{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem}
.Nav--vertical .Nav__link.active{background:transparent;color:var(--brand-primary);font-weight:600}

/* TABLE ----------------------------------------------------------- */
.Table{width:100%;border-collapse:collapse;color:#fff}
.Table thead{background:hsl(240,78%,14%)}
.Table th{text-align:left;padding:.75rem 1rem;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.03em;color:var(--light-gray);font-weight:600;border-bottom:1px solid var(--white-15)}
.Table td{padding:.85rem 1rem;border-bottom:1px solid var(--white-1);font-size:var(--fs-sm)}
.Table tr:hover td{background:var(--white-05)}

/* PAGINATION ------------------------------------------------------ */
.pagination{display:inline-flex;list-style:none;padding:0;margin:0;gap:.25rem}
.page-link{padding:.5rem .75rem;background:var(--brand-accent);border:1px solid var(--light-gray);color:#fff;border-radius:.25rem;text-decoration:none;font-weight:500;font-size:var(--fs-xs)}
.page-item.active .page-link{background:var(--brand-primary);border-color:var(--brand-primary)}

/* MODAL ----------------------------------------------------------- */
.Modal{background:var(--dark-blue);border:1px solid var(--light-gray);border-radius:.75rem;overflow:hidden;max-width:500px}
.Modal__header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:hsl(240,78%,13%);border-bottom:1px solid var(--white-15);font-size:var(--fs-md);font-weight:600}
.Modal__close{background:transparent;border:0;color:var(--light-gray);font-size:1.5rem;cursor:pointer;line-height:1}
.Modal__body{padding:1.25rem}
.Modal__footer{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem 1.25rem;background:hsl(240,78%,13%);border-top:1px solid var(--white-15)}

/* STATUS BUTTON --------------------------------------------------- */
.StatusButton{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:50rem;font-size:var(--fs-xs);font-weight:600;border:1px solid transparent}
.StatusButton--pending{background:rgba(var(--semantic-warning-rgb),.2);color:var(--semantic-warning);border-color:rgba(var(--semantic-warning-rgb),.4)}
.StatusButton--running{background:rgba(var(--brand-primary-rgb),.2);color:var(--brand-primary);border-color:rgba(var(--brand-primary-rgb),.4)}
.StatusButton--success{background:rgba(var(--semantic-success-rgb),.2);color:var(--semantic-success);border-color:rgba(var(--semantic-success-rgb),.4)}
.StatusButton--error{background:rgba(var(--semantic-danger-rgb),.2);color:var(--semantic-danger);border-color:rgba(var(--semantic-danger-rgb),.4)}

/* BOX ------------------------------------------------------------- */
.Box{background:var(--white-05);border:1px solid var(--white-15);border-radius:.75rem;padding:1rem}
.Box--compact{padding:.75rem}
.Box--accent{border-left:3px solid var(--brand-primary)}